Replacing characters with javascript using various <span> tags

Question

I'm trying to use javascript to replace characters in a paragraph with styled characters. If I replace one character with one style it works fine, but when I try to replace 3 different characters with 3 different styles the paragraph is printed 3 times, each with only 1 style change. I want the 3 styles to take effect in 1 paragraph. Below is the code I am using. Thank you.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction (){
var pText=document.getElementById("alteredText").innerHTML; 
var eSpan=pText.replace(/e/g,"<span style='position:relative;color:red;top:.05em;'>e</span>"); 
var tSpan=pText.replace(/t/g,"<span style='position:relative;color:blue;top:-.05em;'>t</span>"); 
var sSpan=pText.replace(/s/g,"<span style='color:green;'>s</span>"); 
var n = eSpan.concat(tSpan,sSpan); 
document.getElementById("alteredText").innerHTML=n; 
}
</script>
</head>
<body onLoad="myFunction()">
<p id="alteredText">
The quick brown fox jumped over the lazy sleeping dog.
The slow shiny robot chased the quick brown fox.
The lazy sleeping dog awoke and barked at the slow shiny robot.
</p>
</body>
</html>

Typically replacements like this are chained (ex: pText.replace().replace().replace()), however that wont work, as the newly added text will match on t and s, so you need to use a better regex and more functional replacement that checks what character was matched and replaces it appropriately. — zzzzBov
– zzzzBov, Commented Sep 21, 2012 at 18:40

mkvcvc · Accepted Answer · 2012-09-21 18:54:30Z

2

var pText=document.getElementById("alteredText").innerHTML;  
var t = pText.replace(/e/g,"@e@");     
t = t.replace(/t/g,"@t@");        
t = t.replace(/s/g,"@s@");        
t = t.replace(/@e@/g,"<span style='position:relative;color:red;top:.05em;'>e</span>");  
t = t.replace(/@t@/g,"<span style='position:relative;color:blue;top:-.05em;'>t</span>");  
t = t.replace(/@s@/g,"<span style='color:green;'>s</span>");  
document.getElementById("alteredText").innerHTML=t;

answered Sep 21, 2012 at 18:54

mkvcvc

1,5752 gold badges19 silver badges42 bronze badges

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

1 Comment

Dylan C Over a year ago

This works perfectly. However, I'm not advance enough to understand everything that's happening here. The "t= .... t= ...." convention is unfamiliar to me, and I don't know what the "@t@" stuff does. However, I still appreciate the help. This is my first time asking a question at Stackoverflow. You were kind to answer so quickly and thoroughly. Thank you.

balafi · Accepted Answer · 2012-09-21 18:58:27Z

0

one quick&dirty solution:

function myFunction (){
    var pText=document.getElementById("alteredText").innerHTML;
    var eSpan=pText.replace(/e/g,"<SPAN STYLE='POSITION:RELATIVE;COLOR:RED;TOP:.05EM;'>e</SPAN>");  // CAPS are needed so no match is found in the next replace
    var tSpan=eSpan.replace(/t/g,"<SPAN STYLE='POSITION:RELATIVE;COLOR:BLUE;TOP:-.05EM;'>t</SPAN>");
    var sSpan=tSpan.replace(/s/g,"<SPAN STYLE='COLOR:GREEN;'>s</SPAN>");
    // var n = eSpan.concat(tSpan,sSpan);   //<-- this creates the three copies of the paragraph. you don't need this.
    document.getElementById("alteredText").innerHTML=sSpan;
}

see http://jsfiddle.net/DUN4C/

answered Sep 21, 2012 at 18:58

balafi

2,1533 gold badges18 silver badges22 bronze badges

1 Comment

Dylan C Over a year ago

Nice. Thanks for the help. This is a functional way of combining variables for my code. The "CAPS are needed" part was a nice touch. This may be a "quick&dirty solution" to you, but to a novice like me it seems like really good stuff. I appreciate it.

italo.nascimento · Accepted Answer · 2012-09-21 18:50:27Z

-1

Try this:

var first = pText.replace(/e/g,"<span style='position:relative;color:red;top:.05em;'>e</span>"); 
var second = first.replace(/t/g,"<span style='position:relative;color:blue;top:-.05em;'>t</span>"); 
var final = second.replace(/s/g,"<span style='color:green;'>s</span>"); 
document.getElementById("alteredText").innerHTML=final;

See what I've done? You were creating three string, each one with one replacement. Here I'm doing the second replacement in the string that already contain the first one. After the last replacement, I put it in the element.

answered Sep 21, 2012 at 18:50

italo.nascimento

1424 bronze badges

2 Comments

mkvcvc Over a year ago

your 's' in 'span' is going to get replaced too

Dylan C Over a year ago

This was mostly very helpful. This is the correct path, but cbaby was right. The 's' in 'span' turned the HTML page into a crazed, stylized version of the code and the paragraph. :^) Thanks all the same. This got me on the right path.

Collectives™ on Stack Overflow

Replacing characters with javascript using various <span> tags

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related