Necesito reemplazar 'No' con 'No' dentro de un encabezado h1 usando javascript de vainilla. Entonces, en pocas palabras, me gustaría encontrar la etiqueta h1 buscando su clase '.product__title', buscar el texto dentro de la etiqueta h1 y encontrar cada instancia de 'No' y luego envolver una etiqueta sup alrededor de la 'o', como abajo
N<sup>o</sup>Y ejemplo de encabezamiento podría ser 'Cuadro N o 04'
Este es el código que probé, que encuentra y reemplaza la palabra, pero no puedo insertar la subetiqueta alrededor de la 'o', sin que el navegador realmente represente la subetiqueta como texto y no como html.
var html = document.querySelector('.product__title'); var walker = document.createTreeWalker(html, NodeFilter.SHOW_TEXT); var node; while (node = walker.nextNode()) { node.nodeValue = node.nodeValue.replace(/No/, 'N<sup>o</sup>') }Cualquier ayuda sería muy apreciada. El código anterior es de un tutorial que encontré buscando, por lo que no es mi código original.
¿Por qué tan complicado?
[...document.querySelectorAll("h1.product__title")] .forEach(h1 => h1.innerHTML = h1.textContent.replace("No ","N<sup>o</sup> ")) <h1 class="product__title">Table No 04</h1> <h1 class="product__title">Table No 05</h1>