Javascript -- How to find and replace text matched via nested array list?

Question

I am trying to find text in all <p> tags, in document and replace the text if it is present in my search_array list:

search_array=[
                ['DBCONERROR01','Unable to Connect Database Server'],
                ['DBCONERROR02','Error Occured With DataBase Connection'],
                ['DBCONERROR03','Unable to Communicate with Data Base'],
                ['DBQRYERROR01','Invalid Query OR DataBase Error'],
                ['DBCONERROR04','Connection Lost with Database'],
                ['DBQRYERROR02','DataBase Query Failed'],
                ['DBQRYERROR03','Invalid to Wrong Sql Query'],
                ['TARIFERROR01','No Rates Found for Tariff'],
                ['AUTHSERROR01','Authentications not Found'],
                ['SWICHERROR01','Unable to Find Switch Details'],
                ['IOPRMERROR01','File Permission Error'],
                ['IOPRMERROR01','IO Error with operation System'],
                ['IOPRMERROR01','File Handling Error - Unable to Communicate with IO'],
                ['OPSSHERROR01','Unable to SSH switch - Connection Error'],
                ['OPSSHERROR02','SSH to Switch Failed'],
                ['OPSSHERROR03','Unable to Copy Scripts to Switch'],
                ['OPSSHERROR04','Unable to Execute Script on Switch'],
                ['JSONPERROR01','Unable to Parse Json'],
                ['TARIFERROR02','No Entry Found'],
                ['TARIFERROR03','Unable to Push Rates TO SBC'],
                ["DoesNotExist('Email does not exist.',)",'No Emails Received']
            ]
        $( document ).ready(function() {
            for(var i=0; i<search_array.length+1; i++)
                {
                    console.log(i);
                    console.log(search_array.length);
                    for(var j=0; j<search_array[i].length; j++)
                    {
                        var str = $("p").text();
                        console.log(str[0]);
                        str.replace(search_array[j], search_array[j+1]);
                    }
                }
            });

This is what my code looks like, But I am still unable to perform task... Kindly help me.

Ram · Accepted Answer · 2013-12-31 11:20:24Z

3

The main problem is you don't reset the p elements' textContent, also .replace() method leaves the original string unchanged. You can use the text() method callback function, the callback is executed once for each selected element in the collection:

// var search_array = [ ... ];
$(document).ready(function() {
    $('p').text(function(_, text) {
       for (var i = 0; i < search_array.length; i++) {
           text = text.replace(search_array[i][0], search_array[i][1]);
       }; 
       return text; // return the modified textContent
    });
});

edited Dec 31, 2013 at 11:20

answered Dec 31, 2013 at 11:07

Ram

145k16 gold badges174 silver badges201 bronze badges

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

2 Comments

user3149111 Over a year ago

What if I want to search in <p> if it contains more than one errors like: "DBCONERROR01, DBCONERROR04 was/were the reason(s) due to which task could not be performed!"

Ram Over a year ago

@user3149111 Well, we are using a for loop for iterating through the entire array for each p element, have you tried it? Does it fail? If yes!, can you reproduce the problem on jsfiddle.net?

Khamidulla · Accepted Answer · 2013-12-31 11:45:25Z

0

@BlackShape answers little bit modified version as following using each function:

// var search_array = [ ... ];
$(document).ready(function() {
    $('p').text(function(_, text) {
       $.each(search_array, function(index){
          text = text.replace(search_array[index][0], search_array[index][1]);    
       }); 
       return text; // return the modified textContent
    });
});

Another drawback in @BlackShape's approach is search_array.length read multiple times inside for statement. If you want to use @BlackShape you can just read only one time and assign to local variable and use it inside of for loop statement.

for (var i = 0; i < search_array.length; i++)

edited Dec 31, 2013 at 11:45

answered Dec 31, 2013 at 11:36

Khamidulla

2,9736 gold badges39 silver badges60 bronze badges

9 Comments

Ram Over a year ago

Why isn't it efficient? Doesn't $.each() use for loops? github.com/jquery/jquery/blob/master/src/core.js#L298

Khamidulla Over a year ago

Every time reading arrays length in for loop. Is it good approach?

Khamidulla Over a year ago

Sorry I mean different thing.

Ram Over a year ago

I see what you mean, but if the performance is the key I wouldn't use $.each().

Khamidulla Over a year ago

Why? Do you think performance of $.each is less than for loop?

|

Collectives™ on Stack Overflow

Javascript -- How to find and replace text matched via nested array list?

2 Answers 2

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related