Javascript 如何循环一个div并使用正则表达式添加一个类？

我已经找到了如何在div中找到正则表达式，甚至还找到了如何使用正则表达式添加类，但是我还没有找到一个可以循环该过程的示例。我尝试了

indexOf（）

，但无法让它对我起作用。我甚至不确定那是我需要的。我想做的是更改标签

#variant_label

中位于两个方括号[]之间的文本，红色。我可以这样做，但它只对第一个标签有效-对第二个标签无效

这是我的HTML：

<input type="radio" name="id" value="value" id="radio_variant-id" checked="checked" />
<label for="radio_variant-id" id="variant_label">5 Packs of 4 (20 Count) [Save 10%]</label>
<p class="variant_price">PRICE <span>SKU</span></p>

<input type="radio" name="id" value="value" id="radio_variant-id" checked="checked" />
<label for="radio_variant-id" id="variant_label">10 Packs of 4 (40 Count) [Save 15%]</label>
<p class="variant_price">PRICE <span>SKU</span></p>

下面是带有我的正则表达式的JavaScript，它使“[Save 10%]”变为红色，但不适用于“[Save 15%]”：

var o=document.getElementById（“变量标签”）；
o、 innerHTML=o.innerHTML.replace（/（？：^[^！]）（\[^[\]*]）/g，'$&'）；

这是我的一把小提琴：

---

我发现这把小提琴完成了我想做的事情，但我需要把它缩小到我的

#variant_标签

中的文本，我很难弄清楚如何做

当前有多个元素具有相同的属性，这构成了无效的标记，因为它们在定义上是唯一的：

id global属性定义一个唯一标识符（id），该标识符必须是 在整个文档中是唯一的。其目的是识别元素 链接（使用片段标识符）、编写脚本或设置样式时 （使用CSS）

考虑改用类

<> P> >代码> ID/COD>基于目标的多个元素是不可能的（这包括你的代码> <代码>元素和其他任何东西），你可以考虑使用<代码>类< /代码>属性代替：

<!-- Other code omitted for brevity -->
<label for="radio_variant-id" class="variant_label">5 Packs of 4 (20 Count) [Save 10%]</label>
<label for="radio_variant-id" class="variant_label">10 Packs of 4 (40 Count) [Save 15%]</label>

示例

您可以在下面进行演示：

---

使用class

class=“variant\u label”

而不是重复的ID:

函数替换器（el）{
el.innerHTML=el.innerHTML.replace（/（？：^.[^！]）（\[^[\]*]）/g，'$&'）；
}
[]forEach.call（document.querySelectorAll（“.variant\u label”），替换程序）
。突出显示{color:red；}

5包4个（20个）【节省10%】
价格单品

10包4个（40个）【节省15%】
price SKU
for=“radio\u variant-id”

两次暗示使用重复的id。另外，与篡改和jpg/赠送代码片段相比，这可能非常重要：）我真的应该养成这样的习惯；多年来，在不支持代码片段的论坛上，旧习惯很难改掉：）就是这样！多谢你，多谢你@amandathewebdev不客气！请注意，我的示例可能不适用于较旧的IE8及以下版本，因为使用了JS

forEach

。如果您对这一点没意见，则使用

for

循环（如Rion的示例中）。快乐的编码。谢谢你的提醒，我会考虑这个问题，如果需要的话，切换到<代码> > <代码>。

var o = document.getElementById("variant_label");
o.innerHTML = o.innerHTML.replace(/(?:^|[^!])(\[[^[\]]*])/g, '<span class="highlight">$&</span>');

<!-- Other code omitted for brevity -->
<label for="radio_variant-id" class="variant_label">5 Packs of 4 (20 Count) [Save 10%]</label>
<label for="radio_variant-id" class="variant_label">10 Packs of 4 (40 Count) [Save 15%]</label>

// Get your labels
var labels = document.getElementsByClassName("variant_label")
for(var e = 0; e < labels.length; e++){
    // Update each label
    labels[e].innerHTML = labels[e].innerHTML.replace(/(?:^|[^!])(\[[^[\]]*])/g, '<span class="highlight">$&</span>');
}