javascript - 将html文本内容传入javascript函数，可高亮多句

Question

我想将文本作为变量值传递给 javascript，以便突出显示相关内容。

例如: 在 HTML 中:

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

在 CSS 中:

.highlighted { background:yellow }

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

但是，它不能工作。 怎么让它显示如图所示的结果？？？？？

感谢@vijayP 的回答。代码有效。

我还有一个问题是如何循环函数以便突出显示多个句子？？？非常感谢!

更新:在 html/jsp 中: https://jsfiddle.net/bob90937/2yw3s376/如何改善这一点。以便可以突出显示多个句子？？？？？

Answer 1

稍微修改了您的代码。还使用 JQuery 轻松读取段落值:

$(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>

更新的 fiddle 链接:

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

处理<table>的代码结构:

HTML:

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

二手 class而不是 id ;因为我们不能在 DOM 中有重复的 id

JS代码:

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

});