How to replace words in text, if they belong to array with Javascript replace()

Question

I have a text like

const a: string = 'I like orange, blue, black, pink, rose, yellow, white, black';

And a string

const b: string =['black', 'yellow'];

I want to replace in string a all black and yellow to violet, so it must look like on the screen

'I like orange, blue, violet, pink, rose, violet, white, violet'.

I know about function replace(), but have no idea how to pass b as argument...Could you please help me?

And if it is possible I would like to replace not with violet, but with input field, so i could type my own colors right in the text...Thank you!

See the documentation for that function

SLaks
– SLaks

2017-06-13 15:15:49 +00:00
Commented Jun 13, 2017 at 15:15 — SLaks
– SLaks, Commented Jun 13, 2017 at 15:15

Nina Scholz · Accepted Answer · 2017-06-13 16:12:16Z

2

You could use a regular expression with the given array, joined by pipe as OR sign in the regular expression.

let a = 'I like orange, blue, black, pink, rose, yellow, white, black';
const b = ['black', 'yellow'];
   
a = a.replace(new RegExp(b.join('|'), 'g'), 'violet');

console.log(a);

With input

function change() {
    document.getElementById('output').innerHTML = 
        a.replace(new RegExp(b.join('|'), 'g'), document.getElementById('input').value);
}

let a = 'I like orange, blue, black, pink, rose, yellow, white, black';
const b = ['black', 'yellow'];

<input id="input" type="text" value="" onchange="change();" />
<div id="output"></div>

edited Jun 13, 2017 at 16:12

answered Jun 13, 2017 at 15:22

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

6 Comments

Nina Scholz Over a year ago

@Arrow, she has not enough rep.

Natali Over a year ago

Do you know, it it possible to insert a input field, not the violet? Like in example link

Natali Over a year ago

Thank you again for you answer, but I meant a slightly different thing...So I would like to display text on screen, but instead of words from from array b, there must be inputs field, so I can type later different another colours and store it to array, so It will be array of my inputs. So like here, in this example link ...

Nina Scholz Over a year ago

i do not understand what you really want. maybe you ask a new question.

Natali Over a year ago

I guess there must be something like a.replace(new RegExp(b.join('|'), 'g'), <input/>); , so I could replace words with inputs

|

FrenchMajesty · Accepted Answer · 2017-06-13 15:19:53Z

1

replace() doesn't accept arrays. But there is a work around. What you could do is loop over each word you would like to replace.

let a: string = 'I like orange, blue, black, pink, rose, yellow, white, black'

const b: string = ['black', 'yellow']

b.forEach(word => {
    a = a.replace(word, 'violet')
})

Also, const are immutable so if you want a variable you can modify make sure to use let.

answered Jun 13, 2017 at 15:19

FrenchMajesty

1,1492 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to replace words in text, if they belong to array with Javascript replace()

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related