Question

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

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



})
}

现在，由于我正在撰写text()，因此跨度显示为文本。（显然）

如果我过度编写html()，则可能会删除其他元素（该文本节点的兄弟节点）。

注意：

页面中有很多$('.summary-block）
搜索应该不区分大小写但是替换应该保持完好无损
search_param

summary block

基本上，我正在寻找类似于浏览器ctrl+F行为的东西

（FIDDLE）[http://jsfiddle.net/bYhxs/]

Answer 1

为什么不这样做：

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

});

JS Fiddle

这是很少的代码，它只查看元素的文本，而不是Html。

编辑：根据评论，我已更新此内容以使用多个.summary-block元素。

编辑：根据您的新修改。请看上面的小提琴。基本上，您创建一个RegExp对象并指定要替换的模式。

var pattern = new RegExp(search_param, 'gi');
//..
replace(pattern, "<span style='color:green;'>" + search_param +"</span>")
..//

有关更多信息，请参阅此帖子：

Case Insensitive javascript replace regex taking account word boundary

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

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

});

Your updated fiddle

复制Ctrl + F行为

1 个答案: