如何使用正则表达式循环遍历div并添加类？

Question

如何使用正则表达式循环遍历div并添加类？

3

我已经找到了如何在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>

这是 CSS 代码：

.highlight {color: #F00}

这是带有我的正则表达式的JavaScript代码，可以使"[Save 10%]"变成红色，但无法作用于"[Save 15%]":

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

这是我所拥有的内容的演示：https://jsfiddle.net/dr4vp2sq/1/

我找到了这个可以实现我想做的事情的演示，但我需要缩小到仅在我的#variant_label中的文本，我很难弄清楚如何实现。 http://jsfiddle.net/cz6owdxx/4/

- amandathewebdev

2个回答

1

您目前有多个具有相同id属性的元素，这构成了无效标记，因为它们根据定义是唯一的：

id全局属性定义了一个唯一标识符(ID)在整个文档中必须是唯一的。它的目的是在链接(使用片段标识符)、脚本或样式(CSS)中标识元素。

考虑使用类(class)替代

由于基于id的定位对于多个元素来说是行不通的(包括您的<input>元素和其他任何元素)，您可以考虑使用class属性代替：

<!-- 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>

然后使用 getElementsByClassName() 获取标签，然后将表达式应用于它们，这样应该能按预期工作：

// 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>');
}

例子

您可以在这里查看更新后的Fiddle示例，如下所示：

- Rion Williams

for="radio_variant-id" 两次出现意味着使用了重复的ID。此外，有时候使用代码片段可能会非常方便，而不是摆弄jpg / gif（http://i.stack.imgur.com/31qbV.jpg）。:) - Roko C. Buljan

我真的应该养成这个习惯；老习惯难改，因为我花了很多年在不支持片段的论坛上 :) - Rion Williams

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

请使用class属性class="variant_label"代替重复的ID：

function replacer(el) {
 el.innerHTML = el.innerHTML.replace(/(?:^|[^!])(\[[^[\]]*])/g, '<span class="highlight">$&</span>');
}

[].forEach.call(document.querySelectorAll(".variant_label"), replacer);

.highlight{color:red;}

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