How to loop through a div and add a class using regular expression?

Question

I've found how to find a regular expression in a div, and even on how to add a class using one, but I haven't been able to find an example where I can loop the process. I tried indexOf() and couldn't get that to work for me. I'm not sure that's even what I need. What I'd like to do, is change text in my label #variant_label that is between two square brackets [ ], red. I can do that, but it only works on the first label - it doesn't work on the second.

Here's my 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>

Here's the CSS:

.highlight {color: #F00}

Here's the JavaScript with my regex that makes "[Save 10%]" red, but doesn't work on "[Save 15%]":

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

Here is a fiddle of what I have: https://jsfiddle.net/dr4vp2sq/1/

I found this fiddle that accomplishes what I want to do, but I need to narrow it down to just the text within my #variant_label and I'm having a hard time figuring out how. http://jsfiddle.net/cz6owdxx/4/

Roko C. Buljan · Accepted Answer · 2016-05-10 21:40:46Z

1

Use class class="variant_label" instead of duplicate 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>

answered May 10, 2016 at 21:40

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amandathewebdev Over a year ago

That did it! Thank you times a billion!

Roko C. Buljan Over a year ago

@amandathewebdev you're very welcome! Just, notice that my example might not be suitable for older IE8 and below since the use of JS forEach. if you're OK with that fine, otherwise use a for loop (like in Rion's example). Happy coding.

amandathewebdev Over a year ago

Thanks for the heads up, I will consider that and switch to a for if needed.

Rion Williams · Accepted Answer · 2016-05-10 21:48:37Z

1

You currently have multiple elements with the same id attribute, which constitutes invalid markup as they are unique by definition :

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

Consider Using Classes Instead

Since id based targeting is going to be out of the question for multiple elements (this includes your <input> elements and anything else), you might consider using class attributes instead :

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

and then use getElementsByClassName() to grab your labels and then apply your expression to them, which should work as expected :

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

Example

You can see an updated example of your Fiddle here and demonstrated below :

edited May 10, 2016 at 21:48

answered May 10, 2016 at 21:40

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

2 Comments

Roko C. Buljan Over a year ago

The for="radio_variant-id" twice implies the use of duplicate ID. Also instead of fiddling and jpg/giffing a code snippet might be quite handy sometimes :)

Rion Williams Over a year ago

I really should get into the habit of that; Old habits die hard from spending years on forums that didn't support snippets :)

Collectives™ on Stack Overflow

How to loop through a div and add a class using regular expression?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related