ChatGPT and me. One good function for a HTML page, two bad Functions

ChatGPT and me worked hard to apply Javascript modules to a local web page on my windows desktop.
We succeeded with one module, failed on two.

I am a “copy and paste” coder so cannot build a module on my own.

Some text below to break links that forum did not like
Any help would be appreciated.

A web page with
box1 - contenteditable contains HTML with, H1,

, <(image tag = img forum will not let me add more than one img) decoding=“async” title=“design and specification” alt=“Image Alt - Recessed Lighting installed this should be underlined” src=“someurl.c o m”>
box2 - ontenteditable contains HTML with:

<div>recessed lighting installed</div>
<div>the interior of</div>
<div>design and specification</div>
<div>this should be underlined</div>
<div>Lighting Services</div>
<div>not in box1</div>

This function accurately loops through strings inside the div’s in box2, finds if in box1 and formats relevant strings in box2 as bold

function findWords() {
// Makes any single matching row bold
  const box1 = document.getElementById("box1");
  const box2 = document.getElementById("box2");
  const box2Rows = box2.innerText.split("\n");
  console.log("box2Rows:", box2Rows);

  box2Rows.forEach((row, index) => {
    const regex = new RegExp("\\b" + row.trim() + "\\b", "gi");
    console.log("regex:", regex);
    if (box1.innerText.match(regex)) {
      box2.innerHTML = box2.innerHTML.replace(regex, "<b>$&</b>");
      console.log(`Match found for row ${index + 1}: ${row}`);

WHAT I WOULD LIKE TO HAPPEN - ChatGPT and me could not get these to work
function findImg() Underline relevant strings in Box2 that are found in box2 within Image Alt  - Recessed Lighting installed this should be underlined
function findInTitle() add a #52b2f" background to the relevant string in box2 within H1, H2, H3 etc

Looking at Chrome Console with a console.log the findImg() function below seems to locate the matching string in box1, but I could never convince ChatGPT to underline the relevant string in box2.

Any help with the two functions above would be appreciated


Function findImg() {
  const box1 = document.getElementById("box1").innerHTML;
  let box2 = document.getElementById("box2").innerHTML;
  const imgTags = box1.match(/<img[^>]+>/g);

  if (imgTags) {
    imgTags.forEach((imgTag) => {
      const alt = imgTag.match(/alt="([^"]*)"/i);
      const title = imgTag.match(/title="([^"]*)"/i);

      if (alt && alt[1].match(/\bthis should be underlined\b/i)) {
        const imgRegex = new RegExp(imgTag, "g");
        box2 = box2.replace(imgRegex, `<img ${imgTag.replace(/(alt=".+?"|title=".+?")/g, '$1 style="text-decoration: underline; background-color: #52b2f;"')}>`);
      } else if (title && title[1].match(/\bthis should be underlined\b/i)) {
        const imgRegex = new RegExp(imgTag, "g");
        box2 = box2.replace(imgRegex, `<img ${imgTag.replace(/(alt=".+?"|title=".+?")/g, '$1 style="text-decoration: underline; background-color: #52b2f;"')}>`);
    document.getElementById("box2").innerHTML = box2;

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

Thanks for pointing out the “missing code”. I incorrectly assumed that somoone would spot th eerror in the function. Ihave copied everythign to Codepen. The function currently works when it finds pairs of words in boxes 2 to 5 that are in a string in box 1, but it should find “two or more” matching words.

I do not think I can edit my original post. Thanks to @JeremyLT for cleaning it up for me.

Here is the full page and script on Codepen, with relevant examples

Thanks for looking at this. I have not made any changes before your reply and it is still not doing what I want. It should find any string of 2 or more words that are an exact match in box1 and box2 (to 5). It is still only finding pairs of words eg 2, 4, 6.

I have edited the text in box1 and 2 to give more examples. The image below shows the strings that should be highlighted in red.

Any help would be appreciated.

Any help with this would be appreciated.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.