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 class="fw-bold text-span">${strEnToSpan[2]}
</span>`,
`<span class="fw-bold text-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>
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 class="bold">$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 class="bold">$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>