Tengo un elemento span con un fragmento de texto interno. Necesito apuntar a partes específicas de ese texto a través de expresiones regulares y convertir mis coincidencias en elementos de intervalo con un atributo de clase class="hightlight-yellow" y un atributo personalizado llamado my-custom-attribute="hello".
Aquí está mi entrada y salida esperada...
Aporte
<span class="message"> This is some text $HIGH:LOW $LOW:HIGH </span>Producción
<span> This is some text <span class="highlight-yellow" my-custom-attribute="hello">$HIGH:LOW</span> <span class="highlight-yellow" my-custom-attribute="hello">$LOW:HIGH</span></span>¿Cómo puedo hacer el reemplazo? Aquí está mi código actual recopilando las coincidencias
function handle() { let element = document.getElementsByClassName('message') let text = element[0].innerText; let regex = /([^=])\$([A-Za-z:]{1,})/g; let matches = text.match(regex); if(matches != null) { for(let i = 0; i < matches.length; ++i) { // TODO takes matches are replace with spans with attributes. } } }Simplemente puede usar su expresión regular en String.prototype.replace() y reemplazarla con el marcado deseado que envuelve su grupo de captura.
Eliminé el primer grupo de captura porque coincide con el espacio en blanco vacío anterior, que no es lo que desea. Además de eso, sugeriría usar querySelectorAll e iterar a través de la lista de nodos para probar su configuración en el futuro.
Si realmente solo desea seleccionar el primer elemento que coincida con el selector .message , eso también es posible.
NOTA: Su salida también parece eliminar la clase de message de su elemento <span> original, pero no estoy seguro de si es un error tipográfico o intencional.
Vea la prueba de concepto a continuación:
function handle() { const regex = /\$([A-Za-z:]{1,})/g; document.querySelectorAll('.message').forEach(el => { el.innerHTML = el.innerText.replace(regex, '<span class="highlight-yellow" my-custom-attribute="hello">$1</span>'); }); } handle(); span.highlight-yellow { background-color: yellow; } <span class="message">This is some text $HIGH:LOW $LOW:HIGH</span>