Estoy tratando de rodear palabras específicas en textContent con etiquetas HTML, hipotéticamente, esto podría hacerse haciendo element.textContent = element.textContent.replaceAll("word", "<h1>word<h1>"); pero eso no se analiza, y element.innerHTML= element.innerHTML.replaceAll("word", "<h1>word<h1>"); no funciona porque existe el riesgo de que la palabra sea el nombre de una etiqueta. ¿Hay alguna solución además de escribir una función de reemplazo personalizada que detecte cuándo está en una etiqueta?
Puede asegurarse de que la palabra que está tratando de rellenar no esté dentro de una etiqueta. Para hacer esto, debe verificar los caracteres que lo rodean. Siempre que no estén encerrados por < y > en ambos lados (o asegúrese de que estén encerrados por <some tag> a la izquierda y </?some tag> a la derecha como lo hice a continuación), deberían estar el único en ser reemplazado. Pruebe este ejemplo de expresión regular a continuación:
function padTags(content, openTag, word, closeTag) { console.log(content) const replacement = openTag + word + closeTag; const regex = `(?<!<[^<>]*)${word}(?![^<>]*>)`; const pattern = new RegExp(regex, 'g'); return content.replace(pattern, replacement); } console.log(padTags(`<p class="questions">What's your favorite class?</p>`, '<custom-tag>', 'class', '</custom-tag>')); console.log(padTags(`<div><p class="test">class</p></div>`, '<custom-tag>', 'class', '</custom-tag>')); console.log(padTags(`<div> class <p data-customvar="<class>">This is my class </p>class</div>`, '<custom-tag>', 'class', '</custom-tag>'));