我需要用<span class="red"></span>
. 我尝试过的几件事不起作用。我认为这归结为我需要在页面上搜索特定字符,但我不知道该怎么做。
问问题
171 次
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
这个怎么样?...
$("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);
注意:正如 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
这将起作用,并且不会在不应该替换的标签中替换 *。
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 回答