Jquery 复制Ctrl+；F行为

我想突出显示文档中出现的所有单词。为此，我编写了以下代码：

function highlight_search_param() {
    // get the search_param from location.search
    filters = location.search.substr(1).split('&')
    search_param = ''
    for (i in filters) {
        param = filters[i].split('=')
        if (param[0] == 'q') {
            search_param = param[1];
            break;
        }
    }
    if (search_param == '') return True
    alert(search_param)

    // convert into many possible cases
   title_search_param = search_param = search_param[0].toUpperCase() +              search_param.substring(1)
          $('.summary-block').contents().find(':contains("'+search_param+'"),:contains("'+search_param.toLowerCase()+'"),:contains("'+title_search_param+'"),:contains("'+search_param.toUpperCase()+'")').each(function(){
        if($(this).text().indexOf(search_param)>=0) {
            $(this).html($(this).text().replace(search_param, "<span class='highlight'>" + search_param +"</span>"));
    }



})
}

函数突出显示搜索参数（）{
//从location.search获取搜索参数
筛选器=location.search.substr（1）.split（“&”）
搜索参数=“”
用于（过滤器中的i）{
参数=筛选器[i]。拆分（'='））
if（参数[0]=“q”）{
搜索参数=参数[1]；
打破
}
}
如果（search_param=''）返回True
警报（搜索参数）
//转化为许多可能的情况
title_search_param=search_param=search_param[0]。toUpperCase（）+search_param.子字符串（1）
$（'.summary block'）.contents（）.find（':contains（“+search\u param+”），：contains（“+search\u param.toLowerCase（）+”），：contains（“+title\u search\u param+”），：contains（“+search\u param.toUpperCase（）+”））。每个（函数（）{
if（$（this）.text（）.indexOf（search_param）>=0）{
$（this）.html（$（this）.text（）.replace（search_param，“+search_param+”）；
}
})
}

现在，由于我过度编写了

text（）

，span显示为文本。（显然）

如果我重写了

html（）

，则可能会删除其他元素（该文本节点的同级元素）

注意

• 页面中有许多

  $（'.summary block

  ）
• 搜索应不区分大小写，但替换内容应保持大小写完整

• 摘要块中可以出现多个
  搜索参数

基本上，我正在寻找类似浏览器的

ctrl+F

行为

---

（小提琴）[http://jsfiddle.net/bYhxs/]

为什么不做以下事情：

$(".summary-block").each(function () {
  $(this).html(function (index, oldHTML) {
    return oldHTML.replace(
      search_param, 
      "<span style='color:green;'>" + search_param + "</span>");
  });

});

有关更多信息，请参阅本文：

值得注意的是，您现在不需要所有包含检查的内容。只需使用最后的代码：

var search_param = "seaRching";
var pattern = new RegExp(search_param, 'gi');

$(".summary-block").each(function(){
   $(this).html($(this).html().replace(
       pattern, "<span class='highlight'>" + search_param +"</span>"
       )
   );

});

var search\u param=“search”；
var pattern=newregexp（search_param，'gi'）；
$（“.summary block”）。每个（函数（）{
$（this）.html（$（this）.html（）.replace(
模式“+”搜索参数+”
)
);
});

---

是的，但是如果有其他元素，如

这是在搜索sdsadaS sadas

那些被替换的元素。如果“.summary block”类中有多个元素，则会出现问题。还是因为只有一个这样的元素？@MichaelGeary-说得好，谢谢。我已经更新了我的答案以适应，并用一个新的例子更新了fiddle。@MichaelGeary，@webnoob，

replace

不区分大小写吗？因为我在代码的

if

部分替换了您的代码。工作正常。但是您是否建议我删除

$（'.summary block'）.contents（）.find（）

。。部分？您不需要调用

html（）

两次，只需使用：

$（this.html（函数（index，oldHTML）{return oldHTML.replace（search_param，“+search_param+”）；}）（）。
var search_param = "seaRching";
var pattern = new RegExp(search_param, 'gi');

$(".summary-block").each(function(){
   $(this).html($(this).html().replace(
       pattern, "<span class='highlight'>" + search_param +"</span>"
       )
   );

});