Estoy buscando una expresión regular para omitir el atributo data-value="4" de la cadena, por ejemplo, tengo una cadena, es decir
Hello this is string <sfpart contenteditable="false" data-value="4">‏</sfpart> and the 4 number in string Ahora, en la cadena anterior, quiero reemplazar 4 con digamos <span class="yellow">4</span> pero no 4 dentro del data-value="4"
Puedo agarrar 4 y reemplazarlo con el <span class="yellow">4</span> haciendo el siguiente código
const reg = new RegExp('('4')', 'gi'); const str = str.replaceAll(reg, '<span class="yellow">$1</span>'); Pero el problema está por encima de la expresión regular, seleccionando 4 dentro del atributo data-value datos y reemplazándolo con las etiquetas html span, es decir data-value="<span class="yellow">4</span> ", así que quiero omitir esa parte.
¿Algún genio para ayudar?
Usa afirmaciones . En este caso, una mirada negativa hacia atrás:
(?<!data-value=")\d+ Esto asegurará que coincida solo con el carácter 4 que no está inmediatamente precedido por el nombre del atributo data-value (así como el =" que precede al valor del atributo).
Pruébelo aquí: https://regex101.com/r/SzPUOx/1
No debería usar expresiones regulares para hacer coincidir etiquetas y atributos HTML. Use DOMParser para analizar su cadena en su lugar, y luego itere a través de todos los nodeChildren y realice el reemplazo en los nodos de texto (que tendrán un nodeType de 3 ):
const string = 'Hello this is string <sfpart contenteditable="false" data-value="4">‏</sfpart> and the 4 number in string'; const parser = new DOMParser(); const parsedNode = parser.parseFromString(string, "text/html").body; for (let i = 0; i < parsedNode.childNodes.length; i++) { const node = parsedNode.childNodes[i]; if (node.nodeType === 3) { const replacementNode = document.createElement('span'); replacementNode.innerHTML = node.textContent.replaceAll(/(\d+?)/gi, '<span class="yellow">$1</span>'); node.parentNode.insertBefore(replacementNode, node); node.parentNode.removeChild(node); } } console.log(`Input:\n${string}`); console.log(`Output:\n${parsedNode.innerHTML}`); document.querySelector('#input').innerHTML = string; document.querySelector('#output').innerHTML = parsedNode.innerHTML; #input, #output { border: 1px solid #000; padding: 8px; margin: 8px; } span.yellow { background-color: yellow; } <strong>Input:</strong> <div id="input"></div> <strong>Output:</strong> <div id="output"></div>