Tengo un fragmento de texto, donde quiero resaltar varias palabras. Las palabras que deben resaltarse están definidas por una matriz de índices: [[10, 15], [20, 27], ...] , estos representan el índice de inicio y fin de los caracteres que deben resaltarse.
Originalmente junté esto:
var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt consequat quam, ut convallis massa euismod at. Proin vel fermentum leo. Suspendisse erat turpis, gravida quis dui sed, mattis consectetur dolor. Curabitur nec tincidunt augue. Donec sapien eros, molestie vel volutpat vitae, vulputate sed ante. Donec finibus consequat dignissim. Donec at nibh eget nibh ultrices gravida. Fusce id molestie eros. Aenean maximus ante et mi elementum, eget pharetra mauris mollis. "; [[10, 15], [20, 27], [39, 45]].forEach(function(pos) { content = content.substring(0, pos[0]) + '<mark>' + content.substring(pos[0], pos[1]) + '</mark>' + content.substring(pos[1]); }) document.querySelector("#test").innerHTML = content; <div id="test"></div> Pero esto obviamente no funciona muy bien, ya que al insertar <mark> , cambia los índices en el texto original.
¿Cómo haría para que esto funcione correctamente?
La forma más sencilla de hacerlo, suponiendo que los índices de marca estén ordenados, sería simplemente invertir la matriz, de modo que los índices restantes permanezcan iguales en la cadena resultante.
[ [10, 15], [20, 27], [39, 45], ] .reverse() .forEach(function (pos) { content = content.substring(0, pos[0]) + '<mark>' + content.substring(pos[0], pos[1]) + '</mark>' + content.substring(pos[1]); }); Si no está ordenado, reemplace el reverse() con un orden personalizado
[ [10, 15], [20, 27], [39, 45], ] .sort(function (a, b) { return b[0] - a[0]; }) .forEach(function (pos) { content = content.substring(0, pos[0]) + '<mark>' + content.substring(pos[0], pos[1]) + '</mark>' + content.substring(pos[1]); });puede usar String#replace , 13 es el número de caracteres en <mark></mark> lo usamos en combinación con el índice i para traducir los índices antiguos a uno actualizado después de cada inserción.
var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt consequat quam, ut convallis massa euismod at. Proin vel fermentum leo. Suspendisse erat turpis, gravida quis dui sed, mattis consectetur dolor. Curabitur nec tincidunt augue. Donec sapien eros, molestie vel volutpat vitae, vulputate sed ante. Donec finibus consequat dignissim. Donec at nibh eget nibh ultrices gravida. Fusce id molestie eros. Aenean maximus ante et mi elementum, eget pharetra mauris mollis. "; [[10, 15], [20, 27], [39, 45]].forEach(function(pos,i) { content = content.replace(content.substring(pos[0]+13*i, pos[1]+13*i),'<mark>' + content.substring(pos[0]+13*i, pos[1]+13*i) + '</mark>') }) document.querySelector("#test").innerHTML = content; <div id="test"></div>