Replace many values in a string based on search/replace pairs

Question

How can replace values as array by replace in javascript.

I want done replace numbers (for example) together. how is it?

1 -replace whit-> 11
2 -replace whit-> 22

<script type="text/javascript">
    var array = {"1":"11", "2":"22"}
    var str="13332";
    document.write(str.replace(array));
</script>

That is not an array, that is a variable named "array" that is referencing an object. Note also that it is just about never appropriate to use document.write(). — Phrogz
– Phrogz, Commented Apr 6, 2012 at 14:51

tavnab · Accepted Answer · 2015-06-17 19:06:12Z

5

You have to create a pattern, using a RegEx, and then pass it to the .replace method.

var array = {"1":"11", "2":"22"}; // <-- Not an array btw.
// Output. Example: "1133322"
document.write( special_replace("13332", array) );

function special_replace(string_input, obj_replace_dictionary) {
    // Construct a RegEx from the dictionary
    var pattern = [];
    for (var name in obj_replace_dictionary) {
        if (obj_replace_dictionary.hasOwnProperty(name)) {
            // Escape characters
            pattern.push(name.replace(/([[^$.|?*+(){}\\])/g, '\\$1'));
        }
    }

    // Concatenate keys, and create a Regular expression:
    pattern = new RegExp( pattern.join('|'), 'g' );

    // Call String.replace with a regex, and function argument.
    return string_input.replace(pattern, function(match) {
        return obj_replace_dictionary[match];
    });
}

edited Jun 17, 2015 at 19:06

tavnab

2,7541 gold badge21 silver badges27 bronze badges

answered Apr 6, 2012 at 14:52

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

4 Comments

Phrogz Over a year ago

Very nice. It might be even nicer if you (or the OP :) wrapped this up as a reusable function.

Rob W Over a year ago

@Phrogz I've turned the thing in a re-usable function. Also omitted Object.keys, since I had to loop through the keys anyway.

Phrogz Over a year ago

Very nice. Any reason you used /(...)/,'$1' instead of /.../,'$&'?

Rob W Over a year ago

@Phrogz Because I've written the RegEx escaping method a while back, without considering $&. $& does also work.

Ruan Mendes · Accepted Answer · 2017-02-06 16:33:31Z

3

http://jsfiddle.net/mendesjuan/uHUs9/

You can pass a function into the replace method

RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

String.prototype.mapReplace = function (replacements) {
    var regex = [];

    for (var prop in replacements) {
        regex.push(RegExp.escape(prop));
    }

    regex = new RegExp( regex.join('|'), "g" );

    return this.replace(regex, function(match){
      return map[match];
    });
}


var map = {"1":"11", "2":"22"};    
var str="13332";

document.write(str.mapReplace(map));

edited Feb 6, 2017 at 16:33

answered Apr 6, 2012 at 15:00

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

2 Comments

WestCoastProjects Over a year ago

This is a good js regex primer. I Might try to use the esajilla for this use case as a simpler implementation.

syme Over a year ago

Small mistake in function String.prototype.mapReplace : map is not defined. replacements should be used instead of map (or renamed to map).

Esailija · Accepted Answer · 2012-04-06 15:05:32Z

1

var str = "13332",
    map = {"1":"11", "2":"22"};

str.split("").map( function(num ){
    return map.hasOwnProperty(num) ? map[num] : num;
}).join("");

//"1133322"

answered Apr 6, 2012 at 15:05

Esailija

140k24 gold badges280 silver badges328 bronze badges

2 Comments

Esailija Over a year ago

@JuanMendes "23333" is the result using that map, is that not the expected result? Also, using that map with "123" results in "233", so please try the code before shaming it ;P

WestCoastProjects Over a year ago

How to make this work for variable length to-be-replaced patterns?

spacevillain · Accepted Answer · 2012-04-06 14:51:08Z

0

<script type="text/javascript">
    var rep = {"1":"11", "2":"22"}
    var str="13332";

    for (key in rep) {
        str = str.split(key).join(rep[key]);
    }

    document.write(str);
</script>

answered Apr 6, 2012 at 14:51

spacevillain

1,3362 gold badges14 silver badges27 bronze badges

5 Comments

Ruan Mendes Over a year ago

@spacevillain Did you try this?

spacevillain Over a year ago

I did and I don't get what is wrong with it. 1 gets replaced by 11, and 2 by 22, resulting in 1133322

Rob W Over a year ago

For non-repeated keys, and non-modified prototypes, this method is sufficient. However, when keys may interfere with each other, a problem arises. Example: 1-2, 2-3 on 123 becomes 333 instead of 233 (the 1 is replaced with 2, then with 3).

Ruan Mendes Over a year ago

@RobW I think the argument about modified prototype is a different one. Not everyone wants to use hasOwnProperty in their for in loops if they've made a decision not to use libs that modify Object.prototype. Discussions about that should not spill into every example that uses for in

Rob W Over a year ago

@JuanMendes I only mentioned the prototype for completeness. The biggest issue is that the whole string is used for the replacement, which may lead to unexpected results (as shown in the simple example in my comment).

Arun Vinoth PrecogTechnologies · Accepted Answer · 2017-07-15 06:49:34Z

0

What about using reduce function ?

<script type="text/javascript">
  var array = {"1":"11", "2":"22"};
  var str = "13332";

  str = Object.keys(array).reduce(function(result, key) {
    return result.replace(new RegExp(key, 'g'), array[key]);
  }, str);

  document.write(str);
</script>

edited Jul 15, 2017 at 6:49

Arun Vinoth PrecogTechnologies

22.9k17 gold badges65 silver badges186 bronze badges

answered Jul 14, 2017 at 21:08

Vladimír Polák

314 bronze badges

Collectives™ on Stack Overflow

Replace many values in a string based on search/replace pairs

5 Answers 5

4 Comments

2 Comments

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related