Issue with javascript

Question

I am working with javascript and I have created a jsfiddle.

I have two textfields: one contains user input and the other one contains result. My problem is when I enter the same word twice then only one of them gets replaced.

For example, if I enter "going,going" in the first text field then the result is "GNG,going" - instead of "GNG,GNG". What am I doing wrong in my code?

HTML:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Scrolling DIV demo on iPhone / iPod Touch / Android / iPad</title>
</head>
<body>
    <input type="text" id="first_text" value="going, used to, to do fast, as soon as possible"/>
    <input type="text" id="second_text"/>
    <input type="button" onclick="replaceText()" value="Click!"/>
</body>
</html>

Javascript:

var replaceText = function () {
    var inputval = document.getElementById('first_text').value;
    var arr = {
        "going": "GNG",
        "used to": "UD",
        "as soon as possible": "ASAP",
        "to do fast": "tdf"
    }

    for(var key in arr) {
        if (typeof (arr[key]) !== "undefined") inputval = inputval.replace(key, arr[key])
    }
    document.getElementById("second_text").value = inputval;
}

I would like to note that all of the answers assume your keys do not contain special characters (which is the case here). If you do add special characters, then you would need to escape them with \\ before the characters. — pimvdb
– pimvdb, Commented Nov 29, 2011 at 13:35
This question is similar to: How do I replace all occurrences of a string in JavaScript?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Dec 6, 2024 at 7:45

KooiInc · Accepted Answer · 2011-11-29 13:30:56Z

5

use inputval.replace(RegExp(key,"g"), arr[key]) in other words, create a Regular Expression from you key value add the 'g[lobal]' modifier to it.

answered Nov 29, 2011 at 13:30

KooiInc

124k32 gold badges145 silver badges181 bronze badges

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

Comments

wsanville · Accepted Answer · 2011-11-29 13:32:04Z

3

Change:

inputval = inputval.replace(key, arr[key])

To:

inputval = inputval.replace(new RegExp(key, 'g'), arr[key])

The replace function and regular expressions are not global, by default, that's what the g switch does. Working example here: http://jsfiddle.net/NSy8P/1/

answered Nov 29, 2011 at 13:32

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

Comments

LostMohican · Accepted Answer · 2011-11-29 13:34:06Z

1

thats because replace just does the operation on the first occurence instead you can use the following :

function replaceAll(txt, replace, with_this) {
  return txt.replace(new RegExp(replace, 'g'),with_this);
}

http://naspinski.net/post/Javascript-replaceAll-function.aspx

answered Nov 29, 2011 at 13:34

LostMohican

3,1447 gold badges33 silver badges42 bronze badges

Comments

hugomg · Accepted Answer · 2011-11-29 13:41:47Z

Replace only replaces the first occurence of the pattern. If you want to replace more then once you will need to use the regexp version of the code. (note the "g" standing for "global replace")

'going, going'.replace(/going/g, 'Go'); // 'Go, Go'

You can dinamically create a regexp from a string if you still want to keep the same code (instead of rewriting it to use regexp patterns directly)

var pattern = new RegExp('going', 'g');

But then you must not have regexp special chars in your pattern. If you want to be able to use special characters, like parenthesis or backslashes, in the key you will need an escape function, like the following one:

function regex_escape(str){
    return str.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1');
}

var pattern = new RegExp (regex_escape(key), 'g');

Collectives™ on Stack Overflow

Issue with javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related