title: Passing html text content into javascript functions, multiple sentence can be highlighted
body: <p>I would like to pass the text as a variable value to the javascript  so as to highlight the relevent content.</p>
  
  <p>for example: 
  in html:</p>
  
  <pre><code>&lt;p id="sentence" &gt;a paragraph &lt;/p&gt;
  &lt;p id="content"&gt; And this here  is inside a paragraph , about paragliders. happy ending.&lt;/p&gt; 
  </code></pre>
  
  <p>in css:</p>
  
  <pre><code>.highlighted { background:yellow }
  </code></pre>
  
  <p>in javascript:</p>
  
  <pre><code>  var word= document.getElementById('sentence').value;
    var root=document.getElementById('content').value;
  
  function highlightWord(root,word){
  
  
    textNodesUnder(root).forEach(highlightWords);
  
    function textNodesUnder(root){
      var walk=document.createTreeWalker(root,NodeFilter.SHOW_TEXT,null,false),
          text=[], node;
      while(node=walk.nextNode()) text.push(node);
      return text;
    }
  
    function highlightWords(n){
      for (var i; (i=n.nodeValue.indexOf(word,i)) &gt; -1; n=after){
        var after = n.splitText(i+word.length);
        var highlighted = n.splitText(i);
        var span = document.createElement('span');
        span.className = 'highlighted';
        span.appendChild(highlighted);
        after.parentNode.insertBefore(span,after);
      }
    }
  }
  </code></pre>
  
  <p>however, it cannot work. 
  How to make it work to show the result as the picture shows?????
  <a href="https://i.stack.imgur.com/UIFPd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIFPd.png" alt="enter image description here"></a></p>
  
  <p>Thanks to @vijayP answer. the code works.<a href="https://i.stack.imgur.com/ev6xz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ev6xz.jpg" alt="enter image description here"></a></p>
  
  <p>I have the other issue with how to loop the function so that multiple sentence can be highlighted??? Thanks a lot!</p>
  
  <p>update: in the html/jsp:
  <a href="https://jsfiddle.net/bob90937/2yw3s376/" rel="nofollow noreferrer">https://jsfiddle.net/bob90937/2yw3s376/</a>   how to improve this. so that multiple sentence can be highlighted?????</p>