在页面上查找单词，用类包裹在 span 标签中答案

【问题标题】：Find word on page, wrap in span tags with class在页面上查找单词，用类包裹在 span 标签中
【发布时间】：2010-09-26 20:27:52
【问题描述】：

我想在页面上查找单词，用类包裹在 span 标签中。在继续执行 javascript 之前，我几乎已经准备好了。

如果我能弄清楚如何完成第一部分，我想我可以得到其余部分。

在页面上查找单词，使用应用于 span 标签的类包装在 span 标签中。然后必须可以通过以下方式搜索：

     $(document).ready(function(){

var injectionKey = /%id=inject%/ig;
var injectionStack = $('#%id%').html();

      (function($) {
  var theInjectionPage = $("span.myclass");
  theInjectionPage.html(theInjectionPage.html().replace(injectionKey, injectionStack)); 
})(jQuery)


    });

【问题讨论】：

标签： javascript jquery

【解决方案1】：

不要使用正则表达式。不要替换大块的innerHTML。不要通过围棋。不要收取 200 美元。

仅遍历文本节点，找到目标文本并拆分以插入新元素。有关使用<a> 的示例代码，请参阅this 问题。

【讨论】：

这是现场..！纯文本版本..我只需要修改它以应用带有类而不是链接标签的跨度标签...我想我应该能够通过一点阅读来做到这一点..很酷谢谢。

【解决方案2】：

[See it in action]

function highlight(term, base) {
  if (!term) return;
  base = base || document.body;
  var re = new RegExp("(" + RegExp.escape(term) + ")", "gi"); //... just use term
  var replacement = "<span class='highlight'>" + term + "</span>";
  $("*", base).contents().each( function(i, el) {
    if (el.nodeType === 3) {
      var data = el.data || el.textContent || el.innerText;
      if (data = data.replace(re, replacement)) {
        var wrapper = $("<span>").html(data);
        $(el).before(wrapper.contents()).remove();
      }
    }
  });
}

function dehighlight(term, base) {
  var text = document.createTextNode(term);
  $('span.highlight', base).each(function () {
    this.parentNode.replaceChild(text.cloneNode(false), this);
  });
}

// escape by Colin Snover
// Note: if you don't care for (), you can remove it..
RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

【讨论】：