Necesito envolver términos específicos en una cadena de texto con etiquetas <span> solo si el término no está ya envuelto en una etiqueta <span> .
Por ejemplo, tengo una cadena de texto:
Test string of text containing foo bar and baz.
Y un objeto con pares de valores clave para buscar en la cadena:
toolTips = { foo: 'tooltip for foo', bar: 'problematic tooltip that also contains baz', baz: 'tooltip for baz' } Necesito iterar sobre las claves de objeto y ajustar los términos coincidentes con las etiquetas <span> para agregar el texto de información sobre herramientas.
Entonces, después de la primera iteración del bucle, la cadena sería:
Test string of text containing <span class="tooltip">foo <span class="tooltip-text">tooltip for foo</span> </span> bar and baz.Después del segundo sería:
Test string of text containing <span class="tooltip">foo <span class="tooltip-text">tooltip for foo</span> </span> <span class="tooltip">bar <span class="tooltip-text">problematic tooltip that also contains baz</span> </span> and baz.Y después del tercero sería:
Test string of text containing <span class="tooltip">foo <span class="tooltip-text">tooltip for foo</span> </span> <span class="tooltip">bar <span class="tooltip-text">problematic tooltip that also contains baz</span> </span> and <span class="tooltip">baz <span class="tooltip-text">tooltip for baz</span> </span> . He intentado hacer esto con string.replace() y con varios patrones de expresiones regulares, pero no he podido hacer que funcione completamente. O el texto dentro de un <span> agregado previamente se compara y se reemplaza o hago una mirada negativa hacia adelante para una etiqueta de cierre </span en la expresión regular y luego el texto que viene antes de que cualquier intervalo no coincida.
Agradecería ideas sobre cómo manejar esto.
No es la idea más eficiente, pero puede intentar usar marcadores de posición para no tener frases que se superpongan.
let string = "Test string of text containing foo bar and baz."; const toolTips = { foo: 0, bar: 1, baz: 2 } const toolTipsPlaceholders = { 0: {key: 'foo', value: 'tooltip for foo'}, 1: {key: 'bar', value: 'problematic tooltip that also contains baz'}, 2: {key: 'baz', value: 'tooltip for baz'} } const keys = Object.keys(toolTips) keys.forEach(k => string = string.replaceAll(k, toolTips[k])) const keysPlaceholders = Object.keys(toolTipsPlaceholders) keysPlaceholders.forEach(k => string = string.replaceAll(k, `<span class="tooltip">${toolTipsPlaceholders[k].key}<span class="tooltip-text">${toolTipsPlaceholders[k].value}</span></span>`)) document.getElementById("test").innerHTML = string; .tooltip { color: red; } .tooltip-text { color: blue; } <div id="test"></div>A continuación se muestra un enfoque que debería permitirle encargarse de ello.
Puede usar una expresión regular realmente complicada para verificar si la clave ya está en los elementos, pero eso puede ser difícil de escribir, comprender y mantener.
En cambio, el truco consiste en recorrer cada nodo de un elemento. Si es un nodo de texto, sabe que no hay HTML allí, por lo que cualquier reemplazo es seguro. Si se trata de un nodo de elemento, recurra a él, busque nodos de texto y omita los elementos de información sobre herramientas.
Esto, en mi opinión, hace que sea más fácil de entender y mantener en el futuro.
En el reemplazo, solo reemplacé la clave con el valor de información sobre herramientas, que no es exactamente lo que desea, pero puede modificarse fácilmente a su gusto.
document.querySelector('button').addEventListener('click', () => { const root = document.querySelector('div'); applyTooltips(root); }); const tooltips = { foo: 'hello bar and baz', bar: 'goodbye', baz: 'cake and foo' }; // Regex that can match all of the keys at the same time // so we don't risk getting weirdness if one tooltip // contains another key const matchRegex = new RegExp(`(${Object.keys(tooltips).join('|')})`, 'g'); const tooltipSelector = '.tooltip'; const applyTooltips = element => { // Loop over each childNode, which might be a text or element node. [...element.childNodes].forEach(child => { // If it is a text node, we'll apply the tooltip logic if (child.nodeType === Node.TEXT_NODE) { // Get the text const text = child.wholeText; // Replace the text with the HTML newText = text.replaceAll(matchRegex, key => `<div class="tooltip">${tooltips[key]}</div>`); // Create a temp element we can assign the // HTML text to to get actual elements const temp = document.createElement('div'); temp.innerHTML = newText; // Apply each new node before the text child [...temp.childNodes].forEach(node => element.insertBefore(node, child) ); // Remove the old text child element.removeChild(child); } else if (!child.matches(tooltipSelector)) { // If it is an element that isn't a tooltip element, we'll recurse on it. applyTooltips(child); } }); }; .tooltip { color: #F00; } <div> Test string of text containing foo bar and baz. This <div class="tooltip">foo</div> is already wrapped and won't get wrapped again. </div> <button>Apply</button>