Javascript - Loop through object and use key/value to perform text replace

Question

I am working on a function that receives an object organised in this manner: {"oldID1":"newID1", "oldID2":"newID2" , … }

This information is to be fed into another function which will perform a string replace of oldID1 with newID1, oldID2 with newID2 etc, inside a textarea containing these ID's.

This initial object originally comes from a series of sorting operations, such that the object keys represent a list's original order, and the object values represent the newly sorted order. So, for example, I would be confronted with an object looking like this:

{
"1":"3",
"2":"1",
"3":"2",
"4":"4"
}

Where the intent was to move item 3 to the top of the list. As a result, for the text in the separate textarea, 1 should be replaced by 3, 2 by 1 and 3 by 2.

When I try to iterate the object and perform the replace, I run into problems because some text gets replaced more than once. So '1' gets replaced by '3', but then later on gets replaced by '2'.

Here is the code I'm using to loop through that object:

$.each(the_object, function(key, value){   
      replace_text(key,value);
});

function replace_text(old_id, new_id){
    var textarea        = $("#the_textarea");
    var str             = textarea.val();
    var replace_regex   = new RegExp("<pic_"+old_id+">");
    str = str.replace(replace_regex, '<pic_'+new_id+'>');
    the_textarea.val(str);
}

I should emphasise that the sorting process is independent of the text replacing. I am simply concerned in finding the best way to perform that text replace given the object I have.

Thanks in advance

Jørgen · Accepted Answer · 2012-02-22 08:11:32Z

3

Given you object containing the IDs are named idObj and it is available in the closure of the function passed to replace, I guess this should work:

var textarea = $('#the_textarea');
textarea.val(function(i,str){
  return str.replace(/<pic_(.*?)>/g,
     function(m,n){ 
       return '<pic_' + (idObj[n] || n) + '>';
     });
});

The n variable here will contain the old index. I see that the properties of idObj is named after the old indices, thus the new index can be retrieved like this var newIndex = idObj['oldIndex]; and the function returns for any given old index.

edited Feb 22, 2012 at 8:11

answered Feb 22, 2012 at 7:31

Jørgen

9,2109 gold badges51 silver badges68 bronze badges

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

4 Comments

Tomalak Over a year ago

@Jørgen: Two notes: A) This will replace IDs that are not in the object with undefined. B) Just use a function argument to .val() and return a new value. See my solution.

Jørgen Over a year ago

Thanks @Tomalak. I editet my answer about the undefined. However, I don't see how passing a function argument to val() makes it less complicated?

Jørgen Over a year ago

Nevermind, I was a little confused about the concat of the keys.

Tomalak Over a year ago

@Jørgen Your solution with || n is better. +1 Deleted mine as it is equivalent.

Diode · Accepted Answer · 2012-02-22 07:38:09Z

1

The problem is obvious.

for key "1" '1' gets replaced by '3' and for the key "3" '3' gets replaced by '2'

So you can do something like this. In function

var replace_regex   = new RegExp("<pic_"+old_id+">");
str = str.replace(replace_regex, '<pic_N'+new_id+'>');

then after loop

str = str.replace(/<pic_N/g, '<pic_');

see a demo here : http://jsfiddle.net/cJn6w/4/

.

answered Feb 22, 2012 at 7:38

Diode

25.2k8 gold badges43 silver badges52 bronze badges

Collectives™ on Stack Overflow

Javascript - Loop through object and use key/value to perform text replace

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related