Как подсвечивать часть текста? [Легкий]

let string1 = "Какие произведения писателей заставляются задуматься о великом?"; 
let string2 = "Какие произведения писателей заставляются о великом?"; 
 
document.getElementById("result").innerHTML = textHighlight(string1, string2); 
 
function textHighlight(str1, str2) { 
  str1 = str1.split(" "); 
 
  let str = str1.map(subStr => { 
    if (str2.includes(subStr)) { 
      return `<span class="highlight">${subStr}</span>`; 
    } else { 
      return subStr; 
    } 
  }); 
  return str.join(" "); 
}

.highlight { 
  color: red; 
}

<p id="result"></p>

const str1 = 'Какие произведения писателей заставляют задуматься о великом?'; 
const str2 = 'Какие произведение писателей заставляют о великом?'; 
const elem = document.querySelector('.result');  
elem.innerHTML = wrapMatches(str1, str2, '<span class="green">');  
console.log(elem.innerHTML);  
 
function wrapMatches(strA, strB, wrapper='<b>') { 
  const [wordsA, wordsB] = [strA.split(/\s+/), strB.split(/\s+/)].sort( 
    (a, b) => b.length - a.length 
  );  
  const [wordsAlc, wordsBlc] = [wordsA, wordsB].map( 
    arr => arr.map(itm => itm.toLowerCase()) 
  );  
  const endTag = `</${wrapper.match(/^<([^\s>]+)/)[1]}>`,  
        len = wordsA.length,  
        result = [];  
  let open = false;  
  for (let lastMatchIdx = 0, i = 0; i < len; ++i) { 
    let matchIdx = wordsBlc.indexOf(wordsAlc[i], lastMatchIdx);  
    if (matchIdx !== -1) { 
      if (!open) 
        open = !!result.push(wrapper);   // всегда вернет true: ="NOT(NOT(n)), n > 0" 
      lastMatchIdx = matchIdx;  
    } else if (open) { 
      open = !result.push(endTag);       // всегда вернет false: ="NOT(n), n > 0" 
    } 
    result.push(wordsA[i]);  
  } 
  if (open) 
    result.push(endTag); 
  return result.join(' ');  
}

p { font-family: sans-serif; } 
.green { font-weight: bold; color: #4d4; }

<p class="result"></p>