Failing to replace a string multiple times

JavaScript
1

Hello!
I ran into a problem that I could not fix myself, so I am asking for your help.
I am trying to replace a string with another string, the replace lines look like this:

var word = document.getElementById("word").innerHTML;

document.getElementById("word").innerHTML = wordd.replace(/B/g, '<span class="style106">B</span><span class="style107"> </span>');

It works just perfectly if left alone, but I need to replace every letter inside this string, adding those style and span tags around each and every letter. So if I add another line to this code, like this:

var word = document.getElementById("word").innerHTML;

document.getElementById("word").innerHTML = wordd.replace(/B/g, '<span class="style106">B</span><span class="style107"> </span>');


document.getElementById("word").innerHTML = wordd.replace(/C/g, '<span class="style106">C</span><span class="style107"> </span>');

Then it would replace only one of those letters with the given line. For example, it would replace only letter C, but it wouldn’t touch the letter B, even though those lines are EXACTLY the same.
I thought it had some problems deciding which line to execute, since they don’t have any intervals between them, so I added setTimeout and ran each line with a 5 second delay, but still the result is the same - it replaces only one of the letters (executes only 1 line of code). It doesn’t matter how many lines there are, I added the whole alphabet, but it still replaced only one letter.

If there is an alternative solution on how to add tags around a letter inside a string, I would like to hear it.
Please help me solve this problem, this is the only line of code that’s keeping me from finishing the whole application.
Thank you!

2

You seem to have some typos there, namely “wordd” instead of “word”. Nevertheless, how about this:

var word = document.getElementById('word'),
letters = word.innerHTML.split(''),
spanified;
for (var i = 0, j = letters.length; i < j; i++) {
  spanified += '<span class="sillystylename">' + letters[i] + '</span>';
}
word.innerHTML = spanified;

I have to say, that SPAN around a bit of whitespace, coupled with the horrible class names of “styleXXX” look mighty suspicious, like the sort of stuff Dreamweaver would produce.

3

A friend of mine helped me out, the problem was this:

document.getElementById(“word”).innerHTML = word.replace

he said something about temporary buffers or something and recommended me to use this line for each replacement:

document.getElementById(“word”).innerHTML = document.getElementById(“word”).innerHTML .replace

and it works just fine, but im thinking this is not the proper way of adding html tags to a string of text.

Can you tell me how to add html tags to a letter inside a string? Using appendChild method. That would be just wonderful

4

You can see the code in action here:
open this link
http://www.w3schools.com/cn/html/tryit.asp?filename=tryhtml_basic

and paste this code on the left side of the webpage, then press ‘edit and click me’

heres the full code:

<html><head><title>eink</title></head> 
<body onload="aaa()">

<script type="text/javascript">

function aaa() {
var word2 = document.getElementById('word'),
        letters = word2.innerHTML.split(''),
        spanified;
        for (var k = 0, j = letters.length; k < j; k++) {
            spanified += '<span class="style101">' + letters[k] + '</span>';
        } 
        word2.innerHTML = spanified;

}


</script>

<style type="text/css">
.style101
            {
                background-color: #FF0000;
            }
</style>
<h1 id="word">HOUSE</h1>

</body>
</html>

Here is a picture, of how it looks:

5

I would like to use your code, but it doesn’t work, here is what I did:

var word2 = document.getElementById('word'),
        letters = word2.innerHTML.split(''),
        spanified;
        for (var k = 0, j = letters.length; k < j; k++) {
            spanified += '<span class="style101">' + letters[k] + '</span>';
        } 
        word2.innerHTML = spanified;

and the word2 element:

 <h1 id="word">HOUSE</h1>

and the style:

.style101
            {
                background-color: #FF0000;
            }

It adds the style tag around characters, but it also adds a text before the string - undefined.

So the result looks like this:

undefinedHOUSE

How can I fix that? I don’t understand, which of the lines are undefined?
Thanks

6

The original issue is that you were operating each time on “word”, which is the initial state, so after each SPAN was being added, the next replacement would operate again on the original string, which is why only one replacement at the end would appear to count.

Anyway, the problem with my code is a silly mistake = it’s because I declared the variable “spanified” but didn’t assign anything to it. Since it has to have something assigned to it, it was “undefined” and normally this would not be a big problem, but in this case we were adding things to the string, so undefined was kept at the start of the string. This works now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>hello world</title>
<style type="text/css">
span {color:red}
</style>
</head>
<body>
<p id="word">Hello there</p>
<script type="text/javascript">
var word = document.getElementById('word'),
letters = word.innerHTML.split(''),
spanified = '';
for (var i = 0, j = letters.length; i < j; i++) {
  spanified += '<span class="sillystylename">' + letters[i] + '</span>';
}
word.innerHTML = spanified;
</script>
</body>
</html>

You need to read up on best practices in HTML and CSS. For a start, using the onload=“” attribute is frowned upon. Plus <style> blocks should go in the <head> (or better, in an external .css file). And I ought to repeat that naming CSS styles as “styleXXX” is truly awful practice.