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

[Colink]

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.

SCENARIO
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>

WHAT WORKS
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
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

NON WORKING findImg FUNCTION

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;
  }
}

[JeremyLT]

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 (').

[Colink]

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.

https://codepen.io/ColinK2/pen/vYQaJjx

[Colink]

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
https://codepen.io/ColinK2/pen/vYQaJjx

[Colink]

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.

[Colink]

Any help with this would be appreciated.