我想在不更改任何 html 标签或 js 代码的情况下替换文档的某些单词。
基本上我所做的是;
document.body.innerHTML = document.body.innerHTML.replace('lorem','new lorem');
但是此代码将替换任何“lorem”。我想避免这样的标签;<script... var lorem = 123; <div class="lorem", <a id="lorem"
等等
我怎样才能在 JS 中做到这一点?
我想在不更改任何 html 标签或 js 代码的情况下替换文档的某些单词。
基本上我所做的是;
document.body.innerHTML = document.body.innerHTML.replace('lorem','new lorem');
但是此代码将替换任何“lorem”。我想避免这样的标签;<script... var lorem = 123; <div class="lorem", <a id="lorem"
等等
我怎样才能在 JS 中做到这一点?
遍历 DOM,以及.replace()
文本节点的值。
function walk(el, fn) {
for (var i = 0, len = el.childNodes.length; i < len; i++) {
var node = el.childNodes[i];
if (node.nodeType === 3)
fn(node);
else if (node.nodeType === 1 && node.nodeName !== "SCRIPT")
walk(node, fn);
}
}
walk(document.body, function(node) {
var text = node.data.split("foo"),
parent = node.parentNode,
i = 1,
newNode;
parent.insertBefore(textNode(text[0]), node);
for (; i < text.length; i += 2) {
(newNode = document.createElement("b"))
.appendChild(textNode("bar"));
parent.insertBefore(newNode, node);
parent.insertBefore(textNode(text[i]), node);
}
parent.removeChild(node);
});
function textNode(txt) {
return document.createTextNode(txt);
}
另一种方法是使用正则表达式,科学你不能将 HTML 标记插入文本节点。
首先,我使用正则表达式来捕获 HTML 标记之外的 body.innerHTML 属性的一部分。
但是,该字符串还包含另一个数据,如果我直接用新数据替换它,一些文本将会丢失。
Insted,我将每个匹配项作为函数的参数,并在该函数内部使用另一个正则表达式。
请注意,您必须替换“foo”两次。
编码:
document.body.innerHTML=document.body.innerHTML.replace(/<[^(script)][^>]*>[^<]*(foo)[^<]*</g,function(match){
return match.replace(/foo/,"newWord");
});