Tratando de encontrar todas las palabras dentro de una etiqueta específica como todas las etiquetas p, para poder aplicarle algunas expresiones regulares y reemplazar todas las palabras.
Por ejemplo,
<p>the lazy cat went <div>up</div> to the cheery fox</p>Puede elegir una expresión regular de "todas las palabras":
/\w+/gPuede usar un jquery replace. Aquí está mi código que aún no funciona completamente.
$("p").html($("p").html().replace(/\w+/g, 'fox'));Ahora lo que necesito hacer es hacer que funcione, de modo que todas las palabras dentro de la etiqueta p se reemplacen con otra palabra. Resultado:
<p>fox fox fox fox <div>fox</div> fox fox fox fox</p> ¿Cómo puedo hacer que jquery reemplace todas las palabras individuales que están dentro de una etiqueta p , pero que no afecte ningún otro HTML o código dentro de él?
En su lugar, recupere todos los nodos de texto e itere sobre ellos para reasignar su contenido a la cadena reemplazada.
const getAllTextNodes = (parent) => { const walker = document.createTreeWalker( parent, NodeFilter.SHOW_TEXT, null, false ); let node; const textNodes = []; while(node = walker.nextNode()) { textNodes.push(node); } return textNodes; }; for (const p of $('p')) { for (const textNode of getAllTextNodes(p)) { textNode.textContent = textNode.textContent.replace(/\w+/g, 'fox'); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>the lazy cat went up to the cheery fox</p>O deshazte de jQuery, ya que en realidad no proporciona ningún beneficio
const getAllTextNodes = (parent) => { const walker = document.createTreeWalker( parent, NodeFilter.SHOW_TEXT, null, false ); let node; const textNodes = []; while(node = walker.nextNode()) { textNodes.push(node); } return textNodes; }; for (const p of document.querySelectorAll('p')) { for (const textNode of getAllTextNodes(p)) { textNode.textContent = textNode.textContent.replace(/\w+/g, 'fox'); } } <p>the lazy cat went up to the cheery fox</p>