纯Javascript -查找/替换DOM中的单词列表
纯Javascript -查找/替换DOM中的单词列表
提问于 2016-08-15 22:29:22
我有一个单词列表，我想在DOM中替换它们。
替换是有效的，但它有一个问题。在被替换的文本之前和之后，它放置一个不需要的斜杠(即减少到一个旅> /a /其他单词1/a旅)
另外，我需要用html标记包装替换的单词，比如。(即减少到一个旅>减少其他单词1一个旅)
您可以在这里看到代码：https://jsfiddle.net/realgrillo/9uL6ofge/
var elements = document.getElementsByTagName('*');
var words = [
[/(^|\s)([Tt]o)(\s|$)/ig, 'OTHER WORD 1'],
[/(^|\s)([Aa]nd)(\s|$)/ig, 'OTHER WORD 2']
];
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
for (var j = 0; j < element.childNodes.length; j++) {
var node = element.childNodes[j];
if (node.nodeType === 3) {
var text = node.data;
for (var k = 0; k < words.length; k++)
{
var from = new RegExp(words[k][0]);
var to = new RegExp('$1' + words[k][1] + '$3');
var replacedText = text.replace(from, to);
//console.log("from: " + from);
//console.log("to: " + to);
//console.log("toDo: " + toDo);
if (replacedText !== text)
{
element.innerHTML = element.textContent.replace(from, to);
console.log("text: " + text);
console.log("replacedText: " + replacedText);
}
}
/*
//
//!!CODE FOR 1 WORD WORKS!! I need to do this for the list of words.
//
var replacedText = text.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3');
if (replacedText !== text) {
element.innerHTML = element.textContent.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1<b class=modified>OTHER WORD</b>$3');
}
*/
}
}
}JS大师，你能帮我吗？纯javascript，请不要jQuery。
谢谢。
回答 2
Stack Overflow用户
发布于 2016-08-15 22:49:56
我可以给你一些更简单的功能来使用。首先，定义一个用于替换如下单词的函数：
String.prototype.replaceAll = function (search, replacement) {
try {
var target = this;
return target.split(search).join(replacement);
} catch (e) {
return "";
}
};这就是纯javascript replace函数在整个情况下只替换一次的原因。之后，您可以在代码中使用它，如下所示：
var replacedText = text.replaceAll(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3');Stack Overflow用户
发布于 2016-08-15 23:19:21
您不需要将words[k][0]解析为RegExp，因为它已经是RegExp了，尽管它不会中断，因为构造函数将很好地处理RegExp。
对于words[k][1]，您也不需要将其解析为一个RegExp，因为String.prototype.replace的第二个参数应该是一个普通字符串。斜杠的存在是因为您将您的RegExp转换为一个字符串(并将以输出结束)。
因此，这是一个可以修复它的改变：
var to = '$1' + words[k][1] + '$3';这是可选的，但可能是一个很好的做法：
var from = words[k][0];要获取html标记，可以在每个words[k][1]或to var声明中直接更改它，这取决于您想要什么。
额外：
在for循环中，代码假定始终至少有三个组(因为有'$3'引用)，一个替代方法可以是在words[k][1]中直接委托这个替换，但这取决于您的决定。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38963986
复制相关文章
相似问题
腾讯云开发者
