Javascript multiple replace with regex that avoids html tags

Question

So I have a java script that finds vowels and capitalizes them. What I want to do is create a id called bigBlue that changes the capitalized values into blue characters with specific css properties.

var strMessage1 = Emphathy;
var startDiv = '<div id="bigBlue">';
var endDiv = '</div>';
var newRoot = strMessage1
.replace(/a/g, startDiv+'A'+endDiv)
.replace(/e/g, startDiv+'E'+endDiv)
.replace(/i/g, startDiv+'I'+endDiv)
.replace(/o/g, startDiv+'O'+endDiv)
.replace(/u/g, startDiv+'U'+endDiv)
$("#test").append(newRoot);

Here is the with the result JsFiddle

My output is pretty much broken gibberish. What im thinking is that the .replace is also replacing the properties of the startDiv and endDiv.

How do I avoid the replacement of the startDiv and endDiv values, while replacing the vowels with the capital vowels, inclosed in the big blue div?

can you provide sample input and sample output? possibly jsfiddle — Grundy
– Grundy, Commented Dec 3, 2013 at 5:50

Grundy · Accepted Answer · 2013-12-03 06:06:31Z

1

try use function to replace instead direct symbols like that

var newRoot = strMessage1.replace(/[aeiou]/g, function(sym){return startDiv+sym.toUpperCase()+endDiv});

sample on jsfiddle

if you want that chars was on one line - use <span> instead of <div>

answered Dec 3, 2013 at 6:06

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

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

1 Comment

brandonscript Over a year ago

and remove the <style> tags around the CSS in the jsFiddle to make them actually blue ;)

Collectives™ on Stack Overflow

Javascript multiple replace with regex that avoids html tags

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related