Warm tip: This article is reproduced from serverfault.com, please click

javascript-查找并替换导致重复的单词

(javascript - Find and replace word causing duplication)

发布于 2020-11-30 17:38:36

我想遍历一组DOM元素/按钮。然后,我想找到一个特定的单词并将其替换为两个单词。

这几乎适用于所有情况。

例如,以下代码会将d​​iv的文本更改为“ 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。

或者找到一个单词,并在其旁边添加另一个。

Questioner
Reena Verma
Viewed
1
CertainPerformance 2020-12-01 01:40:51

你可以否定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更合适,更快,更安全)