how to use regex with 2 element to replace?-CodePudding

I have a string of characters that i want to amend partially by adding a span tag highlighting the words by changing the color. I have a regex that matches 2 different pattern that i am targeting. I can only change the first pattern like i want to but not the other one. Can someone help please?


let regex = /make your life easier|forget about the “I have to’s”/gi,

let aboutUsText3:
    "We have more than 10 years’ experience in the sector and can offer you a professional and comprehensive real estate service. We’re here to [make your life easier], so that you can forget about the [“I have to’s”]. We can give you advice on whatever you need, whether it’s refurbishments, interior design, decoration, rental management, valuation of investments, or anything else. We’re here for you.",

 const spannedText2 =
    locale === "es"
      ? es.aboutUsText3
      : aboutUsText3.replace(
          regex.t3,
          [
            `<span >${strEnToSpan[2]}
          </span>`,
            `<span >${strEnToSpan[3]}</span>`,
          ].shift()
        );

when i call the spannedText function only one element is highlighted. what would be the best way to achieve this?

the output should be as follow:

<p>We have more than 10 years’ experience in the sector and can offer you a professional and comprehensive real estate service. We’re here to <span classname="bold">make your life easier</span>, so that you can forget about the <span classname="bold">“I have to’s”</span>. We can give you advice on whatever you need, whether it’s refurbishments, interior design, decoration, rental management, valuation of investments, or anything else. We’re here for you.",<P>

CodePudding user response：

Try to use https://regex101.com to build and test your RegEx. The website is good for testing and it shows you all your steps needed.

CodePudding user response：

A Simple Alternative

In your example the sections to be highlighted are wrapped in brackets:

[text to be highlighted]

So you could just match the brackets and replace them with a span. This would be much easier to maintain and make work with multiple languages.

The regex matches the brackets and captures the text within:

/\[(.*?)\]/g

And we surround the captured text $1 with a span:

text.replace(/\[(.*?)\]/g, `<span >$1</span>`);

You might also want to look at using a JavaScript markdown library like Marked.js for more complex text transformations.

Run the snippet to understand how it works

function setLocale(locale) {

  let text = locale === "es" ? aboutUsText.es : aboutUsText.en;

  aboutUs.innerHTML = text.replace(/\[(.*?)\]/g, `<span >$1</span>`);
  
}

let aboutUsText = {

en: `We have more than 10 years’ experience in the sector and can offer you a professional and comprehensive real estate service. We’re here to [make your life easier], so that you can forget about the [“I have to’s”]. We can give you advice on whatever you need, whether it’s refurbishments, interior design, decoration, rental management, valuation of investments, or anything else. We’re here for you.`,

es: `Contamos con más de 10 años de experiencia en el sector y podemos ofrecerle un servicio inmobiliario profesional e integral. Estamos aquí para [hacer tu vida más fácil], para que te olvides de los [“tengo que”]. Podemos asesorarte en lo que necesites, ya sean reformas, interiorismo, decoración, gestión de alquileres, valoración de inversiones, o cualquier otro. Estamos aquí por tí.`

};


setLocale("en");

body {
  font-family: sans-serif;
  padding: 1em;
}

.bold {
  font-weight: bold;
  background-color: yellow;
}

<input type="radio" name="locale" value="en" onchange="setLocale(this.value)" checked> English
<input type="radio" name="locale" value="es" onchange="setLocale(this.value)"> Español
<p id="aboutUs"></p>