Tengo una cadena de caracteres que quiero modificar parcialmente agregando una etiqueta de intervalo que resalta las palabras cambiando el color. Tengo una expresión regular que coincide con 2 patrones diferentes a los que me dirijo. Solo puedo cambiar el primer patrón como quiero, pero no el otro. ¿Puede alguien ayudar, por favor?
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() );
cuando llamo a la función spannedText solo se resalta un elemento. ¿Cuál sería la mejor manera de lograr esto?
la salida debe ser como sigue:
<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>
Una alternativa sencilla
En su ejemplo, las secciones que se resaltarán están entre corchetes:
[text to be highlighted]
Así que podría simplemente hacer coincidir los corchetes y reemplazarlos con un lapso. Esto sería mucho más fácil de mantener y hacer que funcione con varios idiomas.
La expresión regular coincide con los corchetes y captura el texto dentro de:
/\[(.*?)\]/g
Y rodeamos el texto capturado $1 con un lapso:
text.replace(/\[(.*?)\]/g, `<span class="bold">$1</span>`);
También es posible que desee considerar el uso de una biblioteca de reducción de JavaScript como Marked.js para transformaciones de texto más complejas.
Ejecute el fragmento para comprender cómo funciona
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>