我想遍历一组DOM元素/按钮。然后,我想找到一个特定的单词并将其替换为两个单词。
这几乎适用于所有情况。
例如,以下代码会将div的文本更改为“ APPLES”。
let buttons = document.getElementsByClassName("main-buttons");
for(var i=0; i<buttons.length; i++) {
var res = buttons[i].innerHTML.replace(/ORANGE/gi, "APPLES");
buttons[i].innerHTML = res;
};
但是,当我想用“橙色气球”替换“橙色”时遇到问题。
而不是在我的按钮中看到“橙色气球”字样。我看到“橙色气球气球”。
let buttons = document.getElementsByClassName("main-buttons");
for(var i=0; i<buttons.length; i++) {
var res = buttons[i].innerHTML.replace(/ORANGE/gi, "ORANGE BALLOONS");
buttons[i].innerHTML = res;
};
我知道这与正则表达式和我的循环捕获到“橙色”有关,但是我想知道是否有更好的方法来查找和替换javascript。
或者找到一个单词,并在其旁边添加另一个。
你可以否定BALLOONS
匹配前瞻性,ORANGE
以确保ORANGE BALLOONS
不更改现有内容:
for (const button of document.querySelectorAll('.main-buttons')) {
button.innerHTML = button.innerHTML.replace(
/ORANGE(?! BALLOONS)/gi,
'ORANGE BALLOONS'
);
}
如果这些元素中的每一个仅包含文本,也将更innerHTML
改为textContent
-最好仅innerHTML
与HTML标记一起使用。(在纯文本的情况下,.textContent
更合适,更快,更安全)