4

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

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()， span 显示为文本。（明显地）

如果我重写了html()，则有可能会删除其他元素（该文本节点的兄弟姐妹）。

笔记。

  • 页面中有很多$('.summary-block)
  • 搜索应该不区分大小写，但替换应该保持大小写不变
  • search_param内部可能出现不止一次summary block

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

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

4

1 回答 1

3

为什么不做类似的事情：

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

});

JS小提琴

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

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

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

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

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

不区分大小写的javascript替换正则表达式考虑单词边界

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

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

});

你更新的小提琴

于 2013-06-15T09:09:05.767 回答