javascript - HTML 中的全文搜索忽略标签/&

Question

我最近看到了很多用于在 HTML 页面中搜索和突出显示术语的库。但是，我看到的每个库都有同样的问题，它们无法找到部分包含在 html 标记中的文本和/或它们无法找到用 &- 表示的特殊字符。

---

例子一:

<span> This is a test. This is a <b>test</b> too</span>

搜索“a test”会找到第一个实例，但找不到第二个实例。

---

示例 b:

<span> Pencils in spanish are called l&aacute;pices</span>

搜索“lápices”或“lapices”将无法产生结果。

---

有没有办法绕过这些障碍？

提前致谢!

Answer 1

您可以使用 window.find()在非 IE 浏览器和 TextRange 的 findText() 中IE中的方法。这是一个例子:

http://jsfiddle.net/xeSQb/6/

不幸的是，在版本 15 中切换到 Blink 渲染引擎之前，Opera 不支持 window.find 或 TextRange。如果这对您来说是一个问题，一个相当重量级的替代方法是使用 TextRange 的组合。和 CSS class applier我的模块 Rangy库，如以下演示所示:http://rangy.googlecode.com/svn/trunk/demos/textrange.html

以下代码是对上述 fiddle 的改进，每次执行新搜索时都取消突出显示以前的搜索结果:

function doSearch(text,color="yellow") {
    if (color!="transparent") {
      doSearch(document.getElementById('hid_search').value,"transparent"); 
      document.getElementById('hid_search').value = text; 
      }
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);
        
        while (window.find(text)) {
            document.execCommand("HiliteColor", false, color);
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("BackColor", false, color);
            textRange.collapse(false);
        }
    }
}

<input type="text" id="search">
<input type="hidden" id="hid_search">
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find">

<div id="content">
    <p>Here is some searchable text with some lápices in it, and more lápices, and some <b>for<i>mat</i>t</b>ing</p>
</div>