Here is a helpful guide on using the replace() function in JavaScript to swap out specific words within a text that match

Question

Here is a helpful guide on using the replace() function in JavaScript to swap out specific words within a text that match

My task involves manipulating the following text:

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

Along with this string:

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

The objective is to replace all instances of black and yellow in string a with violet. Thus, the final result should appear as follows on the screen:

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

I am aware of the replace() function but I am unsure how to use b as an argument. Can someone provide guidance?

If possible, I would also like to implement an input field for the replacement colors instead of hardcoded values. This way, I could dynamically type any desired color into the text. Thank you for your assistance!

javascript arrays typescript replace

Answer 1

Answer №1

To find and replace multiple words in a given string, you can create a regular expression using the array of words joined by the OR sign (|).

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

console.log(sentence);

Here is an example with input:

function changeText() {
    document.getElementById('output').innerHTML = 
        sentence.replace(new RegExp(wordsToReplace.join('|'), 'g'), document.getElementById('input').value);
}

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

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

Answer 2

To find and replace multiple words in a given string, you can create a regular expression using the array of words joined by the OR sign (|).

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

console.log(sentence);

Here is an example with input:

function changeText() {
    document.getElementById('output').innerHTML = 
        sentence.replace(new RegExp(wordsToReplace.join('|'), 'g'), document.getElementById('input').value);
}

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

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

Answer 3

Answer №2

replace() does not support arrays as input. However, there is a workaround solution available. One approach is to iterate over each word that needs to be replaced in the string.

let originalString: string = 'I enjoy seeing red, green, blue and yellow colors'

const wordsToReplace: string[] = ['green', 'yellow']

wordsToReplace.forEach(word => {
    originalString = originalString.replace(word, 'purple')
})

Additionally, it's worth noting that const variables are immutable. To have a variable that can be modified, consider using let.

Answer 4

replace() does not support arrays as input. However, there is a workaround solution available. One approach is to iterate over each word that needs to be replaced in the string.

let originalString: string = 'I enjoy seeing red, green, blue and yellow colors'

const wordsToReplace: string[] = ['green', 'yellow']

wordsToReplace.forEach(word => {
    originalString = originalString.replace(word, 'purple')
})

Additionally, it's worth noting that const variables are immutable. To have a variable that can be modified, consider using let.

Here is a helpful guide on using the replace() function in JavaScript to swap out specific words within a text that match

Answer №1

Answer №2

Similar questions

Is it possible to incorporate a timer script like chrontab within an Apache setting?

What is the process for expanding types for a section element in Typescript?

Resolving TypeError: matchesSelector method is not recognized within React component

Transmitting information to the main Vue class component

Is there a way to retrieve the JavaScript Console response code using Python and Selenium's execute_script method?

Updating an SQL table with PDO using an array

Assigning controller variables within an ajax request

The AJAX request encountered an error due to an Unexpected End of JSON Input

What is the best way to automatically close a parent popup window when the child popup is

Utilizing the reduce method to transform an array containing nested arrays into a different structure

I am having trouble with my jQuery login function not properly connecting to the PHP file

Enhancing search results with data retrieved from a jSON response

Under what circumstances would you need to manually specify the displayName of a React component?

What steps can be taken to ensure that JSON.parse() interprets all numbers as BigInt values?

The value of $parent.$index will consistently be 0 in all cases

Error message "Exceeded the maximum call stack size" encountered during Vue-router authentication

Grunt is your go-to resource for instructions on executing these tasks before the main program

I am interested in showcasing a distinct screen layout specifically designed for mobile device viewing

The number of subscribers grows every time $rootscope.$on is used

Guide to fetching and returning data from AJAX using a function