bob90937 bob90937 - 1 month ago 7
HTML Question

Passing html text content into javascript functions, multiple sentence can be highlighted

I would like to pass the text as a variable value to the javascript so as to highlight the relevent content.

for example:
in html:

<p id="sentence" >a paragraph </p>
<p id="content"> And this here is inside a paragraph , about paragliders. happy ending.</p>


in css:

.highlighted { background:yellow }


in javascript:

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


however, it cannot work.
How to make it work to show the result as the picture shows?????
enter image description here

Thanks to @vijayP answer. the code works.enter image description here

I have the other issue with how to loop the function so that multiple sentence can be highlighted??? Thanks a lot!

update: in the html/jsp:
https://jsfiddle.net/bob90937/2yw3s376/ how to improve this. so that multiple sentence can be highlighted?????

Answer

Modified your code a bit. Also used JQuery for easily reading paragraphs values:

$(document).ready(function() {
  
  var wordText = $('#sentence').text();
  var rootText = $('#content').text();
  var rootNode = document.getElementById('content');

  highlightWord(rootText, wordText);

  function highlightWord(rootText, wordText) {

    textNodesUnder(rootNode).forEach(highlightWords);

    function textNodesUnder(rootNode) {
      var walk = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT, null, false);
      var text = [],
        node;
      while (node = walk.nextNode()) text.push(node);

      return text;
    }

    function highlightWords(n) {
      for (var i;
        (i = n.nodeValue.indexOf(wordText, i)) > -1; n = after) {
        var after = n.splitText(i + wordText.length);
        var highlighted = n.splitText(i);
        var span = document.createElement('span');
        span.className = 'highlighted';
        span.appendChild(highlighted);
        after.parentNode.insertBefore(span, after);
      }
    }
  }

});
.highlighted {
  background: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p id="sentence">a paragraph</p>
<p id="content">And this here is inside a paragraph , about paragliders. happy ending.</p>

Updated Fiddle Link:

https://jsfiddle.net/2yw3s376/3/

Code for dealing with <table> structure:

HTML:

<tr>
  <td class="sentence">a paragraph</td>
  <td class="content">And this here is inside a paragraph , about paragliders.happy ending.</td>
<tr>

used class instead of id; as we can't have duplicate ids in DOM

JS Code:

$(document).ready(function() {
  //loop through all sentence one by one
  $(".sentence").each(function() {
    var parentTR = $(this).closest("tr");
    var wordText = $(this).text();
    var rootNode = parentTR.find('.content')[0];
    var rootText = $(rootNode).text();

    highlightWord(rootText, wordText, rootNode);

  })


  function highlightWord(rootText, wordText, rootNode) {

    textNodesUnder(rootNode).forEach(highlightWords);

    function textNodesUnder(rootNode) {
      var walk = document.createTreeWalker(rootNode, NodeFilter.SHOW_TEXT, null, false);
      var text = [],
        node;
      while (node = walk.nextNode()) text.push(node);

      return text;
    }

    function highlightWords(n) {
      for (var i;
        (i = n.nodeValue.indexOf(wordText, i)) > -1; n = after) {
        var after = n.splitText(i + wordText.length);
        var highlighted = n.splitText(i);
        var span = document.createElement('span');
        span.className = 'highlighted';
        span.appendChild(highlighted);
        after.parentNode.insertBefore(span, after);
      }
    }
  }

});
Comments