NOTA : El primer requisito para esto es que no use jQuery. Tampoco quiero usar .innerHTML si puedo evitarlo (incluso si eso requiere un poco más de código)
Tengo divs dentro de una página (múltiples ubicaciones) que serán algo como esto:
<div class="p-user-content">John Smith current working on ticket LQ-1954</div> ... again, multiple locations ... <div class="p-user-content">Sally Jones <a href="[something]">assigned</a> GM-3398 yesterday</div> Habrá texto simple y etiquetas como <a> mezcladas con el texto como se muestra.
El siguiente script identifica con éxito todos los "nodos de texto":
var el = document.getElementsByClassName('p-user-content'); for (var i in el) { if (typeof el[i].childNodes === 'undefined') continue for (var k in el[i].childNodes) { if (typeof el[i].childNodes[k] === 'function') continue if (el[i].childNodes[k].nodeType !== Node.TEXT_NODE) continue /** This successfully gets the nodeValue */ console.log(el[i].childNodes[k].nodeValue) } } Lo que quiero hacer es dividir el nodo de texto palabra por palabra, y luego convertir valores como LQ-1954 y GM-3398 en elementos de anclaje, y luego reemplazar el texto modificado y los enlaces de anclaje nuevamente en el div existente. Puedo dividir el texto y hacer la parte correspondiente, pero ¿cómo podría
Puedes usar .reemplazar
document.body.outerHTML = document.body.outerHTML.replace(/(LQ-1954)/g , '<a> $1 </a>')Si debe evitar manipular html cambiando el valor de innerHTML , cree un nuevo elemento y reemplace el elemento anterior con él:
function addLinks(){ var el = document.getElementsByClassName('p-user-content'); for (var i in el) { if (typeof el[i].childNodes === 'undefined') continue let value = el[i].innerHTML.replace(/[AZ]{2}-[\d]{4}/g, (match)=>'<a href="#">' + match + '</a>'); let newDiv = document.createElement('div') newDiv.insertAdjacentHTML("beforeend", value); el[i].replaceChildren(newDiv) } } <div class="p-user-content">John Smith current working on ticket LQ-1954</div> ... again, multiple locations ... <div class="p-user-content">Sally Jones <a href="[something]">assigned</a> GM-3398 yesterday</div> <button onclick="addLinks()">Add Links</button> Manera simple usando innerHTML :
function addLinks(){ var el = document.getElementsByClassName('p-user-content'); for (var i in el) { if (typeof el[i].childNodes === 'undefined') continue el[i].innerHTML = el[i].innerHTML.replace(/[AZ]{2}-[\d]{4}/g, (match)=>'<a href="#">' + match + '</a>'); } } <div class="p-user-content">John Smith current working on ticket LQ-1954</div> ... again, multiple locations ... <div class="p-user-content">Sally Jones <a href="[something]">assigned</a> GM-3398 yesterday</div> <button onclick="addLinks()">Add Links</button>