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

Question

我正在尝试遍历一组 DOM elements/buttons。然后我想找到一个特定的词并将其替换为两个词。

这几乎适用于所有场景。

例如，以下代码会将 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;
    };

但是，当我想用“ORANGE BALLOONS”替换“ORANGE”时遇到了问题。

而不是在我的按钮中看到“橙色气球”字样。我看到“橙色气球”。

    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。

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

Answer 1

您可以在匹配 ORANGE 时对 BALLOONS 进行否定前瞻，以确保现有的 ORANGE BALLOONS 不会被更改：

for (const button of document.querySelectorAll('.main-buttons')) {
  button.innerHTML = button.innerHTML.replace(
    /ORANGE(?! BALLOONS)/gi,
    'ORANGE BALLOONS'
  );
}

如果这些元素中的每一个仅包含文本，还要将 innerHTML 更改为 textContent - 最好只使用带有 HTML 标记的 innerHTML。（对于纯文本，.textContent更合适，更快，更安全）

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

Find and replace word causing duplication

javascript

replace

contains

find