使用 jQuery 在页面上包装每个 *答案

【问题标题】：Wrap Each * on a Page Using jQuery使用 jQuery 在页面上包装每个 *
【发布时间】：2013-04-20 19:10:32
【问题描述】：

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

【问题讨论】：

您为什么要这样做？我相信有更好的方法来实现你想要做的事情。
我赞同 Vega 的评论，因为这将是资源密集型的，因为您必须检查整个页面以查找特定字符。
这有点难以解释，但基本上这样做比重新编写我为页面编写的整个脚本更容易。
@Blazemonger：这不正确，$("*") 将返回 all 元素的集合。
我意识到* 的问题，但这仍然不能帮助我弄清楚如何做到这一点。

【解决方案1】：

这个怎么样？...

 $("body:contains(*)").contents().each(function() {
  if(this.nodeType == 1)
  {
      $(this).html($(this).html().replace(/\*/g, "<span class=\"red\">*</span>"))
  }
});

【讨论】：

您可能希望在 nodeType == 3 上执行此操作，以免在 html 中替换 *
我最初是这样尝试的，但后来它并没有替换 html 中的文本，所以我需要获取该特定文本的父节点。因此尝试使用 Nodetype 元素。可能我做错了什么......

【解决方案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 发布了一个更精细但更安全的解决方案。

【讨论】：

这也将替换节点属性中的“*”。
@Dogbert：没错，但是我不认为你经常在属性中使用这样的字符？不过，我会将其添加到答案中。
呃。不幸的是，我试图编辑的东西在属性中有 * 。不过，谢谢，否则这将解决问题。我只需要静态地执行此操作，这将花费更长的时间。
@Rev 永远永远不会以这样的方式替换整个标记。请参阅my answer 作为应该的方式。
@VisioN：我同意，这就是为什么我写它很脏而且很冒险，不过你的回答很棒。

【解决方案3】：

不使用 jQuery 可能会快一点，而且绝对不依赖库：

(function(str,e){
    var regex = new RegExp(str, 'gi');
    e.innerHTML = e.innerHTML.replace(regex, '<span class="red">*</span>');
})('*',document.body);

【讨论】：

不幸的是它也有同样的缺点。

【解决方案4】：

为了不替换整个 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/

【讨论】：

+999，我如此接近这个，卡在分裂部分;）
这里展示了这种方法的REAL SPEED：jsperf.com/replace-text-with-tag。
+1 记得将* 添加到标签的内容中（这就是OP想要的）
这将替换 * 内部脚本和样式标签。
这也将替换<head>中的内容

【解决方案5】：

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

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”为蓝色。如果它不保持蓝色，他们就有一个错误。

【讨论】：