innerHtml 中的 Javascript 搜索排除 html 标签

Question

我用 javascript 编写了一个自定义搜索来突出显示文本。

场景是得到innerHtml并搜索文本并突出显示它们。

问题:如果用户在 i 中搜索 i <div>标签被发现，一切都搞砸了。

var textBlock=document.body.innerHTML;
searchIndex = textBlock.toLowerCase().indexOf(what.toLowerCase(), 0);
while(searchIndex >= 0)
{
    ++counter;
    ID = "result" + counter;
    replacement = '<span id='+ID+' style="background-color:#f0da1e">'+what+'</span>';
    textBlock = textBlock.substring(0, searchIndex) + replacement + textBlock.substring(searchIndex + what.length, textBlock.length);
    searchIndex = textBlock.toLowerCase().indexOf(what.toLowerCase(), (searchIndex + replacement.length));
}
document.body.innerHTML=textBlock;

我该怎么做才能跳过标签中已建立的索引？

像这样:

if(isTag(searchIndex))
    //do nothing

更新:

如果我使用 innerText而不是 innerHtml那么我所有的文本格式和样式都将被破坏。

var textBlock=document.body.innerText;
document.body.innerHTML=textBlock;

Answer 1

一个可能的解决方案是使用节点:

• 获取body子节点(而不是innerHTML)
• 遍历节点:
  • 如果是文本节点(叶子):搜索要替换的字符串。
  • 如果是元素节点:获取并遍历子节点。

这是一个示例函数，它会突出显示您指定的文本:

function highlightText(nodeList, what) {

  // traverse all the children nodes
  for (var x = 0; x < nodeList.length; x++) {

    // text node, search directly
    if (nodeList[x].nodeType == 3) {

      // if it contains the text that you are looking for, proceed with the replacement
      if (nodeList[x].textContent.indexOf(what) >= 0) {

        // your code (mostly :P)
        var ID = "result" + counter;
        var replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';
        var textBlock = nodeList[x].textContent;
        var searchIndex = nodeList[x].textContent.indexOf(what);
        while(searchIndex >= 0)
        {
          ++counter;
          ID = "result" + counter;
          replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';           
          textBlock = textBlock.substring(0, searchIndex) + replacement + textBlock.substring(searchIndex + what.length, textBlock.length);
          searchIndex = textBlock.toLowerCase().indexOf(what.toLowerCase(), (searchIndex + replacement.length));
        }

        // create a new element with the replacement text
        var replacementNode = document.createElement("span");
        replacementNode.innerHTML = textBlock;

        // replace the old node with the new one
        var parentN = nodeList[x].parentNode;
        parentN.replaceChild(replacementNode, parentN.childNodes[x]);

      }
    } else {
      // element node --> search in its children nodes
      highlightText(nodeList[x].childNodes, what);
    }
  }
}

---

这是一个示例演示(也可在 JSFiddle 上获得):

var counter = 0;

function highlightText(nodeList, what) {

  // traverse all the children nodes
  for (var x = 0; x < nodeList.length; x++) {

    // text node, search directly
    if (nodeList[x].nodeType == 3) {

      // if it contains the text that you are looking for, proceed with the replacement
      if (nodeList[x].textContent.indexOf(what) >= 0) {

        // your code (mostly :P)
        var ID = "result" + counter;
        var replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';
        var textBlock = nodeList[x].textContent;
        var searchIndex = nodeList[x].textContent.indexOf(what);
        while(searchIndex >= 0)
        {
          ++counter;
          ID = "result" + counter;
          replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';			
          textBlock = textBlock.substring(0, searchIndex) + replacement + textBlock.substring(searchIndex + what.length, textBlock.length);
          searchIndex = textBlock.toLowerCase().indexOf(what.toLowerCase(), (searchIndex + replacement.length));
        }

        // create a new element with the replacement text
        var replacementNode = document.createElement("span");
        replacementNode.innerHTML = textBlock;

        // replace the old node with the new one
        var parentN = nodeList[x].parentNode;
        parentN.replaceChild(replacementNode, parentN.childNodes[x]);

      }
    } else {
      // element node --> search in its children nodes
      highlightText(nodeList[x].childNodes, what);
    }
  }
}

var nodes = document.body.childNodes;
console.log(nodes);
highlightText(nodes, "ar");

<p>Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, but in ourselves, that we are underlings.</p>
<p><b>William Shakespeare</b>, <em>Julius Caesar</em> (Act I, Scene II)</p>

此解决方案的一个问题是它添加了额外的 span 元素来包装每个包含搜索字符串的文本节点(尽管我不知道这会给您带来多大的不便)。它也是递归的，您可能需要研究迭代替代方案。

---

更新。我知道你没有要求这个，但我认为这可能很有趣:通过重新排序参数列表，并在第一次调用时添加一些初始化，你可以使函数为用户更清洁，同时添加一些有趣的功能:

function highlightText(what, node) {

    // initialize values if first call
    node = node || document.body;
    var nodeList = node.childNodes;

    // traverse all the children nodes
    for (var x = 0; x < nodeList.length; x++) {

        // text node, search directly
        if (nodeList[x].nodeType == 3) {

            // if it contains the text that you are looking for, proceed with the replacement
            if (nodeList[x].textContent.indexOf(what) >= 0) {

                // your code (mostly :P)
                var ID = "result" + counter;
                var replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';
                var textBlock = nodeList[x].textContent;
                var searchIndex = nodeList[x].textContent.indexOf(what);
                while(searchIndex >= 0)
                {
                    ++counter;
                    ID = "result" + counter;
                    replacement = '<span id="'+ID+'" style="background-color:#f0da1e">'+what+'</span>';         
                    textBlock = textBlock.substring(0, searchIndex) + replacement + textBlock.substring(searchIndex + what.length, textBlock.length);
                    searchIndex = textBlock.toLowerCase().indexOf(what.toLowerCase(), (searchIndex + replacement.length));
                }

                // create a new element with the replacement text
                var replacementNode = document.createElement("span");
                replacementNode.innerHTML = textBlock;

                // replace the old node with the new one
                var parentN = nodeList[x].parentNode;
                parentN.replaceChild(replacementNode, parentN.childNodes[x]);

            }
        } else {
            // element node --> search in its children nodes
            highlightText(what, nodeList[x]);
        }
    }
}

现在，要在页面中搜索字符串，您只需执行以下操作:

highlightText("ar");

(不需要第二个参数)

但是如果您将一个元素作为第二个参数传递给该函数，则搜索将仅在指定元素内执行，而不是在整个页面内执行:

highlightText("ar", document.getElementById("highlight_only_this"));

您可以看到在这个 JSFiddle 上工作的演示:http://jsfiddle.net/tkm5696w/2/