Javascript - replace string basing on array

Question

I've got

mystring = "Google" and I've got array

myarray = ["o", "o", "e"]

I want to do something like

mystring.replace(myarray, "<b>$</b>")

So it would return Google - every comming matching letter from array is wrapped in tag.

I also have proper regexp for it /.*?(o).*?(o).*(e).*/i That have matching groups for o followed by o followed by e.

Those arrays and strings are auto generated (fuzzy search) so I'm not able to say how big array and strings will be. I only know the letters to look in the string.

The match would be for only the first ocurrency of each element of the array? I ask because you don't need two o in your array if not. — Jorge Campos
– Jorge Campos, Commented Jun 27, 2014 at 11:24
I need to have two o in array as it says me I need to 'bold' two o's in string not only one. And also I need to respect order of letters in array. So first o means 'find firs o in string' and then 'find another o but it has to be after last match from array' — pie6k
– pie6k, Commented Jun 27, 2014 at 11:26

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You can do:

mystring =  "Google";
myarray = ["o", "o", "e"];

var r = mystring.replace(new RegExp( '(' + myarray.join('|') + ')', 'g'), "<b>$1</b>");
//=> G<b>o</b><b>o</b>gl<b>e</b>

EDIT: Based on discussions below:

mystring =  "Google";
myarray = ["g", "o", "e"];

var r = mystring;
for (var i in myarray) {
    r = r.replace(new RegExp('('+myarray[i]+')(?!<\\/b>)', "i"), "<b>$1</b>");
}
console.log(r); // <b>G</b><b>o</b>ogl<b>e</b>

PS: Due to use of negative lookahead (?!<\/b>) same letter is not replaced twice.

JSFiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 27, 2014 at 11:25

anubhava

790k67 gold badges603 silver badges671 bronze badges

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

12 Comments

pie6k Over a year ago

Lets say array would be ["g", "o", "e"] - then what should happen is: g, first o (only the first, not every) after found g and firs e after found o should be 'bolded'. btw. I'm not the one who voted down.

Jorge Campos Over a year ago

1+ It is exactly what I did at fiddle. I would like to know what is wrong too.

pie6k Over a year ago

Can you supply fiddle? here is mine : jsfiddle.net/8fTM8 (two o's bolded, should be only the first after g). Same with g's - only the first in order should be bolded

pie6k Over a year ago

Here's mine jsfiddle.net/8fTM8 - expected result, first G, first o after last match, first e after last match to be bold. Actual result - every g, o, e bolded.

Jorge Campos Over a year ago

For the last comment of the OP still wont work. You have to add ignorecase RegExp('('+myarray[i]+')','i')

|

Toto · Accepted Answer · 2014-06-27 11:54:08Z

1

Here is my way to go:

var tmp = mystring;
for (l in myarray) {
    tmp = tmp.replace(new RegExp('('+myarray[l]+'(?:\\B|$))'), '<b>$1</b>');
}

Console:

G<b>o</b><b>o</b>gl<b>e</b>

The (?:\\B|$) makes the regex not producing Google

You could also use:

new RegExp('('+myarray[l]+'(?!<))')

answered Jun 27, 2014 at 11:54

Toto

91.7k63 gold badges97 silver badges135 bronze badges

Comments

pawel · Accepted Answer · 2014-06-27 11:58:53Z

0

So I came up with something like this:

var boldByArray = function( string, array ){
    var result = [];
    string.split('').forEach( function( letter ){
        if( array.indexOf( letter ) == 0 ){
             result.push( '<b>' + array.shift() +'</b>' );
        }
        else {    
            result.push( letter );
         }
    });
    return result.join('');
}

The result for array boldByArray('google', ['e','g','o']) will be Google because you want to respect the order, so it finds the e, then looks for g and o after that e which never comes. boldByArray('google', ['x','g','o']) will be just google, because there's no x.

http://jsfiddle.net/wuSaE/1/

Updated with fuzzy matching demo gathered from comments you've provided: http://jsfiddle.net/wuSaE/3/

edited Jun 27, 2014 at 11:58

answered Jun 27, 2014 at 11:44

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Collectives™ on Stack Overflow

Javascript - replace string basing on array

3 Answers 3

JSFiddle

12 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related