Javascript HTML 中的全文搜索忽略标签 / &
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5886858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full text search in HTML ignoring tags / &
提问by Bruno
I've recently seen a lot of libraries for searching and highlighting terms within an HTML page. However, every library I saw has the same problem, they can't find text partly encased in an html tag and/or they'd fail at finding special characters which are &-expressed.
我最近看到了很多用于在 HTML 页面中搜索和突出显示术语的库。但是，我看到的每个库都有同样的问题，他们找不到部分包含在 html 标签中的文本和/或他们无法找到用 & 表示的特殊字符。
Example a:
示例一：
<span> This is a test. This is a <b>test</b> too</span>
Searching for "a test" would find the first instance but not the second.
搜索“a test”会找到第一个实例，但不会找到第二个。
Example b:
示例 b：
<span> Pencils in spanish are called lápices</span>
Searching for "lápices" or "lapices" would fail to produce a result.
搜索“lápices”或“lapices”将无法产生结果。
Is there a JS library that does this or at least a way to circumvent these obstacles?
是否有一个 JS 库可以做到这一点，或者至少是一种绕过这些障碍的方法？
Thanks in Advance!
提前致谢！
Bruno
布鲁诺
回答by Tim Down
You can use window.find()in non-IE browsers and TextRange's findText()method in IE. Here's an example:
您可以window.find()在非 IE 浏览器中使用 和 IE 中TextRange的findText()方法。下面是一个例子：
Unfortunately Opera prior to the switch to the Blink rendering engine in version 15 doesn't support either window.findor TextRange. If this is a concern for you, a rather heavyweight alternative is to use a combination of the TextRangeand CSS class appliermodules of my Rangylibrary, as in the following demo: http://rangy.googlecode.com/svn/trunk/demos/textrange.html
不幸的是，Opera 在版本 15 中切换到 Blink 渲染引擎之前不支持window.find或TextRange. 如果这对您来说是一个问题，一个相当重量级的替代方法是使用我的Rangy库的TextRange和CSS 类应用程序模块的组合，如下面的演示所示：http: //rangy.googlecode.com/svn/trunk/演示/文本范围.html
Code:
代码：
function doSearch(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, "yellow");
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, "yellow");
textRange.collapse(false);
}
}
}
回答by cdeszaq
There are 2 problems here. One is the nested content problem, or search matches that span an element boundary. The other is HTML-escaped characters.
这里有2个问题。一个是嵌套内容问题，或跨越元素边界的搜索匹配。另一个是 HTML 转义字符。
One way to handle the HTML-escaped characters is, if you are using jQuery for example, to use the .text()method, and run the search on that. The text that comes back from that already has the escaped characters "translated" into their real character.
处理 HTML 转义字符的一种方法是，例如，如果您正在使用 jQuery，则使用该.text()方法，并在其上运行搜索。从中返回的文本已经将转义字符“翻译”为它们的真实字符。
Another way to handle those special characters would be to replace the actual character (in the search string) with the escaped version. Since there are a wide variety of possibilities there, however, that could be a lengthy search depending on the implementation.
处理这些特殊字符的另一种方法是用转义版本替换实际字符（在搜索字符串中）。然而，由于那里有各种各样的可能性，这可能是一个漫长的搜索，具体取决于实现。
The same sort of "text" method can be used to find content matches that span entity boundaries. It gets trickier because the "Text" doesn't have any notion of where the actual parts of the content come from, but it gives you a smaller domain to search over if you drill in. Once you are close, you can switch to a more "series of characters" sort of search rather than a word-based search.
可以使用相同类型的“文本”方法来查找跨越实体边界的内容匹配。它变得更加棘手，因为“文本”没有任何关于内容的实际部分来自哪里的概念，但是如果您深入搜索，它会为您提供一个较小的搜索域。一旦接近，您可以切换到更多的“字符系列”搜索而不是基于单词的搜索。
I don't know of any libraries that do this however.
但是，我不知道有任何图书馆可以做到这一点。
回答by Vinochan
To highlight search keywords and remove highlighting from a web page using javascript
使用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>
回答by Hacker17
Just press F3 and use the <p>and </p>command to tell others on your site.
For example:You have the knowledge of the F3 search button so to put text on the screen to tell others you would type..
只需按 F3 并使用<p>和</p>命令告诉您站点上的其他人。例如：您了解 F3 搜索按钮，因此可以在屏幕上放置文本以告诉其他人您将键入..
<p><h4>If your having trouble finding something press F3 to highlight the text<h4></p>
