4

我需要用<span class="red"></span>. 我尝试过的几件事不起作用。我认为这归结为我需要在页面上搜索特定字符，但我不知道该怎么做。

4

5 回答 5

5

为了不替换整个 HTML（态度真的很差），我们可以对元素进行快速操作：

var specialTags = ["script", "style"].join("|"),
    re = new RegExp("^(?:" + specialTags + ")$", "i");

for (var els = document.getElementsByTagName("*"), i = els.length; i--;) {
    var el = els[i];

    if (re.test(el.tagName))
        continue;

    for (var j = 0, childs = el.childNodes, lj = childs.length; j < lj; j++) {
        var child = childs[j];
        if (child.nodeType === 3 && child.nodeValue.indexOf("*") > -1) {
            var segments = child.nodeValue.split("*");
            for (var k = 0, lk = segments.length; k < lk; k++) {
                el.insertBefore(document.createTextNode(segments[k]), child);
                if (k < lk - 1) {
                    var span = document.createElement("span");
                    span.className = "red";
                    span.appendChild(document.createTextNode("*"));
                    el.insertBefore(span, child);
                }
            }
            el.removeChild(child);
        }
    }
}

这是不需要 jQuery 的纯 JavaScript，在这里没有什么帮助。

演示：http: //jsfiddle.net/T4ZXA/5/

于 2013-04-26T15:21:17.457 回答
2

这个怎么样？...

http://jsfiddle.net/n3Sqn/

 $("body:contains(*)").contents().each(function() {
  if(this.nodeType == 1)
  {
      $(this).html($(this).html().replace(/\*/g, "<span class=\"red\">*</span>"))
  }
});
于 2013-04-26T14:59:42.507 回答
2

这有点肮脏和风险（如下所述），但您可以尝试以下方法：

var allHTML = $("body").html();
allHTML = allHTML.replace(/\*/g, "<span class=\"red\">*</span>");
$("body").html(allHTML);

http://jsfiddle.net/6rDK4/

注意：正如 Dogbert 指出的那样，这可能会替换*HTML 标记中的字符，例如节点属性。

编辑：请记住，这可能会重新附加您体内的所有脚本！尝试用body你的主容器替换。

EDIT2：VisioN 发布了一个更详细但更安全的解决方案。

于 2013-04-26T15:03:42.710 回答
2

如果不使用 jQuery，它可能会更快一些，并且绝对不依赖于库：

(function(str,e){
    var regex = new RegExp(str, 'gi');
    e.innerHTML = e.innerHTML.replace(regex, '<span class="red">*</span>');
})('*',document.body);
于 2013-04-26T15:11:39.910 回答
1

这将起作用，并且不会在不应该替换的标签中替换 *。

http://jsfiddle.net/DR6Ca/2/

var text = $("body").find(":contains(*)").contents().filter(function() {
    //Don't include css or script tags, all other text nodes are fine.
  return this.nodeType == 3
      && ($(this).parent().get(0).tagName.toUpperCase() !== "SCRIPT") 
      && ($(this).parent().get(0).tagName.toUpperCase() !== "STYLE");
}).replaceWith(function() {
   return this.textContent.replace(/\*/g, "<span class=\"red\">*</span>");

您可以在这个 jsfiddle 中测试其他代码，看看它们是否保持“hi”蓝色。如果它不保持蓝色，他们就有一个错误。

于 2013-04-26T15:35:58.900 回答