我最近看到了很多用于在 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ápices</span>
搜索“lápices”或“lapices”将无法产生结果。
有没有办法绕过这些障碍？
提前致谢！
您可以window.find()在非 IE 浏览器中使用 和 IE 中TextRange的findText()方法。下面是一个例子：
不幸的是，Opera 在版本 15 中切换到 Blink 渲染引擎之前不支持window.find或TextRange. 如果这对您来说是一个问题，一个相当重量级的替代方法是使用我的Rangy库的TextRange和CSS 类应用程序module的组合，如下面的演示所示：http : //rangy.googlecode.com/svn/trunk/演示/文本范围.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> 这里有2个问题。一个是嵌套内容问题，或跨越元素边界的搜索匹配。另一个是 HTML 转义字符。
处理 HTML 转义字符的一种方法是，例如，如果您正在使用 jQuery，则使用该.text()方法，然后对其运行搜索。从中返回的文本已经将转义字符“翻译”为它们的真实字符。
处理这些特殊字符的另一种方法是用转义版本替换实际字符（在搜索字符串中）。然而，由于存在各种各样的可能性，这可能是一个漫长的搜索，具体取决于实现。
可以使用相同类型的“文本”方法来查找跨越实体边界的内容匹配。它变得更加棘手，因为“文本”没有任何关于内容的实际部分来自哪里的概念，但是如果您深入搜索，它会为您提供一个较小的搜索域。一旦接近，您可以切换到更多的“字符系列”搜索而不是基于单词的搜索。
但是，我不知道有任何图书馆可以做到这一点。
使用javascript突出显示搜索关键字并从网页中删除突出显示
<script>
function highlightAll(keyWords) {
document.getElementById('hid_search_text').value = keyWords;
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(keyWords)) {
document.execCommand("HiliteColor", false, "yellow");
sel.collapseToEnd();
}
document.designMode = "off";
goTop(keyWords,1);
}
function removeHighLight() {
var keyWords = document.getElementById('hid_search_text').value;
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(keyWords)) {
document.execCommand("HiliteColor", false, "transparent");
sel.collapseToEnd();
}
document.designMode = "off";
goTop(keyWords,0);
}
function goTop(keyWords,findFirst) {
if(window.document.location.href = '#') {
if(findFirst) {
window.find(keyWords, 0, 0, 1);
}
}
}
</script>
<style>
#search_para {
color:grey;
}
.highlight {
background-color: #FF6;
}
</style>
<div id="wrapper">
<input type="text" id="search_text" name="search_text">
<input type="hidden" id="hid_search_text" name="hid_search_text">
<input type="button" value="search" id="search" onclick="highlightAll(document.getElementById('search_text').value)" >
<input type="button" value="remove" id="remove" onclick="removeHighLight()" >
<div>
<p id="search_para">The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages.</p>
</div>
</div>