0

This may seem stupid and forgive me if this has been asked a million times no one thread seems to have the answer I'm looking for. I'm very new to coding in general so I very well might just not be comprehending what I'm reading. I have a project I'm working on where I need to be able to replace multiple variations of a name or phrase with one constant word or phrase and I managed to figure it out for a singular one however getting it to work for multiple has failed me for about a day now.

example:

const txtrs = document.getElementById('txt1').value
const replaces = txtrs.replaceAll('variation1', 'proper')
document.getElementById('txt1').value = replaces

which is great but I need it to replace multiple ones however doing

const txtrs = document.getElementById('txt1').value
const replaces = txtrs.replaceAll('variation1', 'variation2' 'proper')
document.getElementById('txt1').value = replaces

doesn't work it just replaces variation1 with variation2 instead of proper as I need and this problem has stumped me because I just can't figure out what I don't understand about it. The HTML it's calling in getElementById is a textarea where users would input whatever they needed to be replaced.

Cibino
  • 3
  • 2

2 Answers2

2

You could use multiple calls chained together:

const replaces = txtrs
   .replaceAll('variation1', 'proper')
   .replaceAll('variation2', 'proper');

Or use regex:

const replaces = txtrs.replace(/(variation1|variation2)/g, 'proper');

Or use a loop:

let replaces = txtrs;
for (const target of ['variation1', 'variation2']) {
    replaces = replaces.replaceAll(target, 'proper');
}

Keep in mind that if you choose to use regex, it's a good idea to escape your input in case they have special characters like [, ), $, +, etc.

Using some answer from Escape string for use in Javascript regex, we could use:

const replaces = txtrs.replace(
    new RegExp("(" + ['variation1', 'variation2'].map((str) => escapeStringRegexp(str)).join("|") + ")", "g"),
'proper');

And we'd get the same results.

kelsny
  • 23,009
  • 3
  • 19
  • 48
  • It's possible `variation1` might include special regex characters e.g. if it was `Product (1.0)` which would cause issues with your regex code – Nick Sep 08 '22 at 03:40
  • You're a wonderful person you don't know how happy I am to finally be able to move on to the next challenge with this project haha. The way you explained all of this was very simple for me to understand as well which I really appreciate! – Cibino Sep 08 '22 at 03:51
0

You can simply achieve it by using a simple RegEx with the help of String.replaceAll() method.

Live Demo (For demo purpose, I am just getting a value from an input based on ID) :

const txtrs = document.getElementById('txt1').value;
const replacedStr = txtrs.replaceAll(/variation[0-9]/g, 'proper');
console.log(replacedStr)
<input type="text" id="txt1" value="Hello variation1, Welcome to variation2 and variation3"/>

RegEx (/variation[0-9]/g) explanation :

/ : used to denote the boundaries of the regular expression.
variation : used to match variation word in the passed string.
[0-9] : used to find any character between the brackets. In this case it will be a span of numbers from `0` to `9`
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
  • Huh, this is actually a really space-efficient way of doing it I may need to change some stuff in my project! – Cibino Sep 12 '22 at 15:54
  • @Cibino Thanks! Kindly do accept this answer if it helps. So that it will help fellow developers facing same problem. – Debug Diva Sep 12 '22 at 16:53