Highlight matched text

Question

I want to implement highlight feature of Notepad++ in HTML, where notepad++ highlights selected words if found in the file. I have been able to mimic a bit only where the highlight happens only on a mouse click in the same div.
I want to change it so the highlight happens in div2 when text is selected in div1 and is found in div2, else div2 is same as div1. Also it should work except any mouse click and with multi words.





  
  highlight matching text
  
  
  



  
  

  I'm here but not here. Not here also. But I'm here too.

user_2930038 · Answer

Try this:

const div1 = document.getElementById("div1"),
      div2 = document.getElementById("div2"),
      isParent = (obj, parent) => !obj || obj === parent ? obj : isParent(obj.parentNode, parent);
/*
isParent is a short version of:

function isParent(obj, parent)
{
  if (!obj || obj === parent)
  {
    return obj;
  }
  else
  {
    return isParent(obj.parentNode, parent);
  }
}

*/


div1.addEventListener("click", e =>
{
  const sel = document.getSelection();
/*
  sel.anchorNode: element the selection started at
  sel.focusNode: element the selection ended at
  we only accept selection of div1 text
  check if both of these elements are children of div1, otherwise exit
*/
  if (!isParent(sel.anchorNode, div1) || !isParent(sel.focusNode, div1))
    return;

  const text = sel.toString() //get selected text
               .trim() //trim trailing white spaces
                //make it html friendly
               .replace(/&/g, "&")
               .replace(//g, ">")
                //make it regex friendly
               .replace(/[-/\^$*+?.()|[\]{}]/g, '\$&');

  if (text === "")
    return;

  div2.innerHTML = div2.innerHTML
                    //remove old highlightings
                    .replace(/([^<]*)?/g, "$1")
                    // convert selected text into regex,
                    // search and enclose found strings with 
                    .replace(new RegExp("(" + text + ")", "gi"), '$1'); //add new highlighting
});

/*
  second paragraph marks
*/
p:first-child + p mark {
  background-color: lightgreen;
}

#div1, #div2
{
  border: 1px solid black;
  padding: 1em;
}

#div2
{
  background-color: #E0E0E0;
  margin-top: -1px;
}


  I'm here but not here. Not here also. But I'm here too. <span>blah</span>



  But I'm here too. blah <span>blah</span>
  And also here.
  Third paragraph, has "And also here."

Highlight matched text

1 Answers