javascript – 正则表达式搜索html返回,但不是实际的html jQuery

2019年8月3日 160次阅读

我正在为客户端制作一个突出显示的插件,以便在页面中查找内容,我决定使用仍在构建的帮助查看器对其进行测试,但我遇到的问题(可能)需要一些正则表达式.

我不想解析HTML,并且我完全公开如何以不同的方式做到这一点,这似乎是最好的/正确的方式.

http://oscargodson.com/labs/help-viewer

http://oscargodson.com/labs/help-viewer/js/jquery.jhighlight.js

在搜索中键入内容…确定,刷新页面,现在键入,类,类或类=“或键入< a您将注意到它将搜索实际的HTML(如预期的那样).我怎样才能搜索文本？ 如果我做.text()它会蒸发所有的HTML和我得到的将只是一大块文本,但我仍然想要HTML所以我不会丢失格式,链接,图像等我想要这个工作像CMD / CTRL F. 你可以使用这个插件： $( ‘文章’)jhighlight({发现： ‘类’}); 要删除它们： .jhighlight( ‘删除’) == ==更新 虽然下面的迈克塞缪尔的想法确实有效,但这个插件有点沉重.它主要用于希望在表单的“发布”过程中擦除坏词和/或MS Word字符的客户端.我正在寻找一个更轻量级的解决方案,任何想法？

最佳答案 你真的不想使用eval,乱用innerHTML或“手动”解析标记.在我看来,最好的方法是直接处理文本节点并保留原始html的缓存以删除高亮显示.快速重写,评论：

(function($){
  $.fn.jhighlight = function(opt) {

    var options = $.extend($.fn.jhighlight.defaults, opt)
      , txtProp = this[0].textContent ? 'textContent' : 'innerText';

    if ($.trim(options.find.length) < 1) return this;

    return this.each(function(){

      var self = $(this);

      // use a cache to clear the highlights
      if (!self.data('htmlCache'))
        self.data('htmlCache', self.html());

      if(opt === 'remove'){
        return self.html( self.data('htmlCache') );
      }

     // create Tree Walker
     // https://developer.mozilla.org/en/DOM/treeWalker
     var walker = document.createTreeWalker(
          this, // walk only on target element
          NodeFilter.SHOW_TEXT,
          null,
          false
      );

      var node
        , matches
        , flags = 'g' + (!options.caseSensitive ? 'i' : '')
        , exp = new RegExp('('+options.find+')', flags) // capturing
        , expSplit = new RegExp(options.find, flags) // no capturing
        , highlights = [];

      // walk this wayy
      // and save matched nodes for later
      while(node = walker.nextNode()){
        if (matches = node.nodeValue.match(exp)){
          highlights.push([node, matches]);
        }
      }

      // must replace stuff after the walker is finished
      // otherwise replacing a node will halt the walker
      for(var nn=0,hln=highlights.length; nn<hln; nn++){

        var node = highlights[nn][0]
          , matches = highlights[nn][1]
          , parts = node.nodeValue.split(expSplit) // split on matches
          , frag = document.createDocumentFragment(); // temporary holder

        // add text + highlighted parts in between
        // like a .join() but with elements :)
        for(var i=0,ln=parts.length; i<ln; i++){

          // non-highlighted text
          if (parts[i].length)
            frag.appendChild(document.createTextNode(parts[i]));

          // highlighted text
          // skip last iteration
          if (i < ln-1){
            var h = document.createElement('span');
            h.className = options.className;
            h[txtProp] = matches[i];
            frag.appendChild(h);
          }
        }
        // replace the original text node
        node.parentNode.replaceChild(frag, node);
      };

    });
  };

 $.fn.jhighlight.defaults = {
    find:'',
    className:'jhighlight',
    color:'#FFF77B',
    caseSensitive:false,
    wrappingTag:'span'
 };

})(jQuery);

如果您正在对页面进行任何操作,您可能希望将缓存替换为另一种清理机制,但这并非易事.

你可以在这里看到代码：http://jsbin.com/anace5/2/

您还需要在新的html元素中添加display：block,在几个浏览器上打破布局.

点赞