Replace and Concat an image HTML String

Question

I have an array named Sport with almost 20 items and I need to replace an image HTML string with global replacement (/string/g), my string contains HTML tags. This is an example:

//Sports array
var sport = ['soccer','tennis','pool','basketball'];

//Original string
var original = 'Hello, do you play <img width="20" src="img/soccer.png"/> ?';

//New string
var newstring;

//If original string contains an image html of some sports from array,replace with :sport[item]:
for (var i = 0; i < sport.Length; i++)
{
   newstring = original.replace('/<img width="20" src="img\/icons\/'+sport[i]+'.png"/>/g',':'+sport[i]+':');
}

So, recap... I need to replace this

<img width="20" src="img/soccer.png"/>

To this

:soccer:

The result should be: Hello, do you play :soccer:?

Looks like you've mixed RegExp literal and a string in the replace argument. Create a RegExp to use with a constructor, or remove the RegExp literal parts from the string. — Teemu
– Teemu, Commented Jan 19, 2016 at 8:53
hi, i need to replace a string that could contain IMG tags, and this img tag replace by :sport: (as literal as you read and saw in the example from above) — xnanitox
– xnanitox, Commented Jan 19, 2016 at 8:53

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

1

You have to replace this :

newstring = original.replace('/<img width="20" src="img\/icons\/'+sport[i]+'.png"/>/g',':'+sport[i]+':');

to this :

newstring = original.replace(new RegExp('<img width="20" src="img\/icons\/'+sport[i]+'.png"\/>', 'g'),':'+sport[i]+':');

because you can't concatenate string in "inline" regex (if someone knows the right name, please comment) :

// no quotes around pattern
newString = myString.replace(/pattern/g, "foo")

You should have a look at this answer : Replacing all occurrences of a string in JavaScript

Edit :

If you have troubles with special characters (from the answer quoted) :

function escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function replaceAll(str, find, replace) {
    return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}


// Use :
var newString = replaceAll(myString,"pattern", "replace_with_this");

In your example :

for (var i = 0; i < sport.length; i++)
{
    newstring = replaceAll(
                    // original String
                    original,
                    // pattern
                    '<img width="20" src="img/icons/'+sport[i]+'.png"/>',
                    // replace with :
                    ':'+sport[i]+':');
}

note: in replaceAll you don't have to escape your pattern, it is done by the escapeRegExp function

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 19, 2016 at 8:54

Apolo

4,0512 gold badges26 silver badges53 bronze badges

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

1 Comment

xnanitox Over a year ago

yep, there's a problem with the html string part that i want to replace, it works with a single word or without special chars

Collectives™ on Stack Overflow

Replace and Concat an image HTML String

1 Answer 1

Edit :

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit :

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related