Question

我最近看到很多用于在HTML页面中搜索和突出显示术语的库。但是，我看到的每个库都存在同样的问题，他们找不到部分包含在html标签中的文本和/或他们找不到＆amp; -expressed的特殊字符。

示例a：

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

搜索“测试”会找到第一个实例但不是第二个实例。

示例b：

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

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

是否有一个JS库可以做到这一点，或者至少是一种规避这些障碍的方法？

提前致谢！

布鲁诺

Answer 1

您可以在非IE浏览器中使用window.find()，在IE中使用TextRange的{{3}}方法。这是一个例子：

findText()

不幸的是，在转换到版本15中的Blink渲染引擎之前，Opera不支持window.find或TextRange。如果这是您关注的问题，那么相当重要的选择是使用我的http://jsfiddle.net/xeSQb/6/库的TextRange和CSS class applier模块的组合，如下面的演示：{{3} }

代码：

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

Answer 2

这里有两个问题。一个是嵌套内容问题，或跨越元素边界的搜索匹配。另一个是HTML转义字符。

处理HTML转义字符的一种方法是，如果您使用jQuery，则使用.text()方法，并对其运行搜索。从那里回来的文本已经将转义的字符“翻译”成了它们的真实角色。

处理这些特殊字符的另一种方法是用转义版本替换实际字符（在搜索字符串中）。然而，由于存在各种各样的可能性，根据实施情况，这可能是一个冗长的搜索。

可以使用相同类型的“文本”方法来查找跨越实体边界的内容匹配。它变得更加棘手，因为“文本”没有关于内容的实际部分来自何处的任何概念，但是如果你钻进，它会为你提供一个较小的域来搜索。一旦你关闭，你可以切换到更多“一系列字符”类似于搜索，而不是基于单词的搜索。

我不知道有任何库可以做到这一点。

Answer 3

突出显示搜索关键字并使用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"> &nbsp; 
        <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)" >  &nbsp; 
        <input type="button" value="remove" id="remove" onclick="removeHighLight()" >  &nbsp; 
        <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>

Answer 4

只需按F3并使用<p>和</p>命令告诉您网站上的其他人。例如：你知道F3搜索按钮，所以要在屏幕上放置文字告诉别人你要输入..

<p><h4>If your having trouble finding something press F3 to highlight the text<h4></p>

HTML中的全文搜索忽略标签/＆amp;

4 个答案: