突出显示搜索文本 [英] Highlight the search text

问题描述

我有一个类似的javascript：

 <   script     type   =  text / javascript >  
 function getHighlight（）{
 var MainText =''; 
 var toSearch ='store'; 
 MainText = MainText +'<   table   > '; 
 MainText = MainText +'<   tr   >  <   td  >  <   b  > 商店<   / b  >  < span class =code-keyword><   / td  >  <   / tr  > '; 
 MainText = MainText +'<   tr   >  <   td     class   =  clsUrl >  <   a     href   =  check％20Store％20quality.aspx    style   =  color：blue; text-decoration：none;    target   =  _ blank > 检查％20Store％20quality.aspx <  < span class =code-leadattribute> / a  >  <   / td  >  <   / tr  > '; 
 MainText = MainText +'<   tr   >  <   td  >  <   p  > 关于商店的一些说明... <   / p  > ;  <   br     /  >  <   / td  >  <   / tr  > '; 
 MainText = MainText +'<   / table  > '; 
 $（'。dv_searchResult'）。append（MainText）; 
 textHightLight（$（。dv_searchResult）。html（），toSearch，。dv_searchResult）; 
} 
 
函数textHightLight（totText，term，dvCls）{
 var src_str = totText; 
 var childNodes = document.body.childNodes; 
 term = term.replace（/（\ s +）/，（<   [^  > ] +>）* $ 1（<   [^  > ] +>）*）; 
 var pattern = new RegExp（（+ term +），gi）; 
 
 src_str = src_str.replace（pattern，<   mark  >  $ 1 <   / mark  > ）; 
 src_str = src_str.replace（/（<   mark  >  [^ <  > ] *）（（<   [^  > ] +> ）+）（[^ <  > ] *  <   \ / mark  > ）/，$ 1 <   / mark  >  $ 2 <   mark  >  $ 4）; 
 
 $（dvCls）.html（src_str）; 
} 
 <   / script  >  

这里我将完整的html绑定到div dv_searchResult中然后突出显示div内的toSearch文本。它的工作正常到一定程度。唯一的问题是，如果toSearch文本包含也存在于url中的任何单词（例如，在上面的文本中，商店存在于href =check％20Store％20quality.aspx中），那么url也会被替换为<   mark  >  <   / mark  > 我正在使用的突出这个词。我需要帮助我如何忽略clsUrl类或<       href   =   > 标记，同时读取textHightLight函数中的文本。 
 
请帮忙。

见这里的例子：小提琴示例

解决方案

（'。dv_searchResult'）。append（MainText）;
textHightLight（

（。dv_searchResult）。html（），toSearch，。dv_searchResult）;
}

函数textHightLight（totText，term，dvCls）{
var src_str = totText;
var childNodes = document.body.childNodes;
term = term.replace（/（\ s +）/，（< [^ > ] +>）*

1（< [^ > ] +>）*）;
var pattern = new RegExp（（+ term +），gi）;

src_str = src_str.replace（pattern，< mark >

I have a javascript like:

<script type="text/javascript">
        function getHighlight() {
            var MainText = '';
            var toSearch = 'store';
            MainText = MainText + '<table>';
            MainText = MainText + '<tr><td><b>Stores</b></td></tr>';
            MainText = MainText + '<tr><td class="clsUrl"><a href="check%20Store%20quality.aspx" style="color:blue; text-decoration:none;" target="_blank">check%20Store%20quality.aspx</a></td></tr>';
            MainText = MainText + '<tr><td><p>Some Description about store...</p><br /></td></tr>';
            MainText = MainText + '</table>';
            $('.dv_searchResult').append(MainText);
            textHightLight($(".dv_searchResult").html(), toSearch, ".dv_searchResult");
       }

    function textHightLight(totText, term, dvCls) {
        var src_str = totText;
        var childNodes = document.body.childNodes;
        term = term.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
        var pattern = new RegExp("(" + term + ")", "gi");

        src_str = src_str.replace(pattern, "<mark>$1</mark>");
        src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4");

        $(dvCls).html(src_str);
    }
        </script>

Here I am binding the complete html into a div dv_searchResult and then highlighting the toSearch text inside the div. Its working fine to an extent. The only problem is that if the toSearch text contains any word which exists also in url (eg, in the above text, store exists inside href="check%20Store%20quality.aspx" also.),then the url is also replaced with <mark></mark> that i am using to highlight the word. I need help on how can I ignore the clsUrl class or the <a href=""> tag while reading the text in textHightLight function.

Kindly help.

See the example here: fiddle Example

解决方案

('.dv_searchResult').append(MainText); textHightLight(

(".dv_searchResult").html(), toSearch, ".dv_searchResult"); } function textHightLight(totText, term, dvCls) { var src_str = totText; var childNodes = document.body.childNodes; term = term.replace(/(\s+)/, "(<[^>]+>)*

1(<[^>]+>)*"); var pattern = new RegExp("(" + term + ")", "gi"); src_str = src_str.replace(pattern, "<mark>

这篇关于突出显示搜索文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！