JavaScript String.Replace() not working

Question

var formatChart = {
    '[newline]' : '<br />', 
    '[tab]' : '&nbsp;&nbsp;&nbsp;&nbsp;', 
    '[space]' : '&nbsp;'
}; 


// Formats a string according to the formatting chart
var formatString = function(string)
{
    for (var k in formatChart)
    {
        while (string.indexOf(formatChart[k]) != -1)
            string = string.replace(k, this.formatChart[k]); 
    }
    return string; 
}; 

var str = "Hello[newline]World[tab]Tab[space]Hello[newline]Done"; 
alert(formatString(str));

The code above is supposed to replace all occurrences of "special" characters ([newline], etc) with their HTML equivalents. But it's not working.

Why?

Besides the below, you will also need to get rid of this. from this.formatChart[k]. this refers to your formatString function — bcoughlan
– bcoughlan, Commented Jul 13, 2011 at 19:05

deadalnix · Accepted Answer · 2011-07-13 21:26:54Z

4

Be carefull, replace in javascript works with regex. This is not what you are trying to do. An usual way to do is use combined join and split functions.

Plus, you are testing if the replaced string exists in a first place (formatChart[k]) but you want to test if the replacee (k) is in that string.

here is a sample code :

function formatString(str) {
    for (var k in formatChart) {
        str = str.split(k).join(formatChart[k]);
    }

    return str;
}

edited Jul 13, 2011 at 21:26

answered Jul 13, 2011 at 19:01

deadalnix

2,33618 silver badges27 bronze badges

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

4 Comments

Guffa Over a year ago

No, the replace method doesn't work with regular expressions if you use a string as the first parameter. Besides, if you are using split and join instead, you should not loop.

deadalnix Over a year ago

I'm looping because the OP wants to replace severals substrings in his string.

Guffa Over a year ago

When you have replaced a substring, it doesn't exist in the string any more, so you don't have to loop to try to replace it again.

deadalnix Over a year ago

Ho yes, that's true ! I just copied the structure of the question but you are right. I'll edit my answer according to that.

gereeter · Accepted Answer · 2011-07-13 18:57:35Z

2

You are searching the string for the resultant values, not the keys. Try this instead:

var formatString = function(str)
{
    for (var k in formatChart)
    {
        while (str.indexOf(k) != -1)
            str = str.replace(k, formatChart[k]); 
    }
    return str; 
};

answered Jul 13, 2011 at 18:57

gereeter

4,7891 gold badge30 silver badges28 bronze badges

3 Comments

Guffa Over a year ago

That will result in an eternal loop, as the value of str never changes.

gereeter Over a year ago

What do you mean? The statement str = str.replace(k, formatChart[k]); modifies str, doesn't it? Also, it doesn't loop when I test it.

Guffa Over a year ago

The code was string = str.replace(k, formatChart[k]); when I wrote the comment.

g.d.d.c · Accepted Answer · 2011-07-13 18:58:34Z

1

string.indexOf(formatChart[k]) != -1 is wrong. When iterating over an Object (which you actually shouldn't do) the k value is the Key. You want string.indexOf(k) != -1.

answered Jul 13, 2011 at 18:58

g.d.d.c

48.3k12 gold badges105 silver badges116 bronze badges

2 Comments

tomfumb Over a year ago

I'm curious why you say you shouldn't iterate over an object (assuming hasOwnProperty is used) - how else do you traverse a (pseudo) associative array in JavaScript?

gereeter Over a year ago

for ... in loops are only bad for built-in objects, in my opinion. This is because built-ins have many extra unwanted properties. For example, Arrays have lengths. For user-made hashtables, on the other hand, it is invaluable. You know what you put in there, and as long as you don't extend Object.prototype, you won't have any extra properties. Note that that particular problem, as tomfumb mentioned, can be fixed with hasOwnProperty.

Nick Husher · Accepted Answer · 2011-07-13 18:59:32Z

1

Instead of this:

while (string.indexOf(formatChart[k]) != -1)

Try this:

while (string.indexOf(k) != -1)

answered Jul 13, 2011 at 18:59

Nick Husher

1,88411 silver badges13 bronze badges

Comments

bluefoot · Accepted Answer · 2011-07-13 19:00:26Z

1

There is an small mistake in your function. replace

while (string.indexOf(formatChart[k]) != -1)

by

while (string.indexOf(k) != -1)

and see the results

answered Jul 13, 2011 at 19:00

bluefoot

10.6k12 gold badges46 silver badges57 bronze badges

Comments

jfriend00 · Accepted Answer · 2011-07-13 19:40:18Z

1

Here's a slightly different regex version. This escapes the regex chars in the things to replace so we can use the global replace of the regex replace function. You need double backslashes in front of the brackets so that you're left with on backslash when passed as a regex.

var formatChart = {
    '\\[newline\\]' : '<br />', 
    '\\[tab\\]' : '&nbsp;&nbsp;&nbsp;&nbsp;', 
    '\\[space\\]' : '&nbsp;'
};

var str = "Hello[newline]World[tab]Tab[space]Hello[newline]Done";  

function formatString(str) {
    for (var i in formatChart) {
        str = str.replace(new RegExp(i, "gi"), formatChart[i]);
    }
    return(str);
}

You can see it in action here: http://jsfiddle.net/jfriend00/pj2Kr/

edited Jul 13, 2011 at 19:40

answered Jul 13, 2011 at 19:18

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Comments

Joe · Accepted Answer · 2011-07-13 19:09:38Z

0

Here's a fiddle using regex: http://jsfiddle.net/msTuC/

answered Jul 13, 2011 at 19:09

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Comments

Kyle Trauberman · Accepted Answer · 2011-07-13 22:22:54Z

0

Incorrect: while (string.indexOf(formatChart[k]) != -1)

Correct: while (string.indexOf(k) != -1)

edited Jul 13, 2011 at 22:22

Kyle Trauberman

25.7k13 gold badges88 silver badges124 bronze badges

answered Jul 13, 2011 at 19:07

1337XyPhR

813 bronze badges

Collectives™ on Stack Overflow

JavaScript String.Replace() not working

8 Answers 8

4 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related