Tengo una función de búsqueda en un texto específico con versos, que está estructurado como el texto de muestra a continuación.
La primera línea de cada verso tiene un número de verso al principio. Mi función de búsqueda funciona bien. Busca una palabra y guarda toda la línea en la que aparece la palabra en una matriz y la imprime en el elemento "rslt".
Ahora me gustaría guardar el número de verso de la línea encontrada y si no tiene uno, debería tomarlo de la línea de arriba. ¿Tienes una idea de cómo podría lograr esto?
function srch() { var input, filter, p, cache, resultEl; input = "MTV"; cache1 = []; resultEl = document.getElementById('reslt'); p = document.getElementsByTagName('p'); for (i = 0; i < p.length; i++) { if (p[i].innerHTML.indexOf(input) > -1) { cache1.push(p[i].innerHTML); /*save results in array*/ } } if (cache1.length > 0) { for (i = 0; i < cache1.length; i++) { resultEl.innerHTML = resultEl.innerHTML + cache1[i] + "<br>"; /*write results*/ } } } <div><button onclick="srch()">Search</button></div> <div id="reslt"></div> <p class="1stline"><span class="verse-nr">1 </span>The quick, brown fox jumps over a lazy dog.</p> <p class="xline"> DJs flock by when MTV ax quiz prog.</p> <p class="1stline"><span class="verse-nr">2 </span> Junk MTV quiz graced by fox whelps.</p> <p class="xline"> Bawds jog, flick quartz, vex nymphs.</p> <p class="1stline"><span class="verse-nr">3 </span> Waltz, bad nymph, for quick jigs vex!</p> <p class="xline"> Fox nymphs grab quick-jived waltz.</p> <p class="xline">Brick quiz whangs jumpy veldt fox.</p> <p class="xline">Bright vixens jump; dozy fowl quack.</p> <p class="1stline"><span class="verse-nr">4 </span>Quick wafting zephyrs vex bold Jim. </p> <p class="xline">Quick zephyrs blow, vexing daft Jim.</p>Aquí hay una solución usando .previousElementSibling .
Pruebe para ver si hay una etiqueta <span> , si es así, el verso # está allí, de lo contrario, concatene el HTML del elemento anterior con el resultado de la búsqueda. Luego, inserte el resultado en su matriz,
Verifique los comentarios en el código en la función srch() :
function srch() { var input, filter, p, cache, resultEl; input = "MTV"; cache1 = []; resultEl = document.getElementById('reslt'); p = document.getElementsByTagName('p'); for (i = 0; i < p.length; i++) { if (p[i].innerHTML.indexOf(input) > -1) { // if it includes a span, it includes the verse # if (p[i].querySelector('span')) { cache1.push(p[i].innerHTML); /*save results in array*/ // otherwise, get the previous siblings HTML too } else { cache1.push(p[i].previousElementSibling.innerHTML + p[i].innerHTML); } } } if (cache1.length > 0) { for (i = 0; i < cache1.length; i++) { resultEl.innerHTML = resultEl.innerHTML + cache1[i] + "<br><br>"; /*write results*/ } } } <div><button onclick="srch()">Search</button></div> <div id="reslt"></div> <p class="1stline"><span class="verse-nr">1 </span>The quick, brown fox jumps over a lazy dog.</p> <p class="xline"> DJs flock by when MTV ax quiz prog.</p> <p class="1stline"><span class="verse-nr">2 </span> Junk MTV quiz graced by fox whelps.</p> <p class="xline"> Bawds jog, flick quartz, vex nymphs.</p> <p class="1stline"><span class="verse-nr">3 </span> Waltz, bad nymph, for quick jigs vex!</p> <p class="xline"> Fox nymphs grab quick-jived waltz.</p> <p class="xline">Brick quiz whangs jumpy veldt fox.</p> <p class="xline">Bright vixens jump; dozy fowl quack.</p> <p class="1stline"><span class="verse-nr">4 </span>Quick wafting zephyrs vex bold Jim. </p> <p class="xline">Quick zephyrs blow, vexing daft Jim.</p>Si yo fuera tú, crearía una nueva función para encontrar un número de verso y sería algo como esto
var p = document.getElementsByTagName('p'); function srch() { var input, filter, cache, resultEl; input = "MTV"; cache1= []; resultEl = document.getElementById('reslt'); for (i = 0; i < p.length; i++) { if (p[i].innerHTML.indexOf(input) > -1) { cache1.push(p[i].innerHTML); /*save results in array*/ var verseNumber = findVerseNumber(i); console.log(verseNumber) } } if (cache1.length>0){ for (i = 0; i < cache1.length; i++) { resultEl.innerHTML = resultEl.innerHTML + cache1[i]+"<br>"; /*write results*/ } } } function findVerseNumber(index){ var verseNumber; for (j = index; j >= 0; j--) { if (p[j].querySelector('span')) { verseNumber = p[j].querySelector('span').innerHTML.trim(); break; } } return verseNumber; }html
<div><button onclick="srch()">Search</button></div> <div id="reslt"></div> <p class="1stline"><span class="verse-nr">1 </span>The quick, brown fox jumps over a lazy dog.</p> <p class="xline"> DJs flock by when MTV ax quiz prog.</p> <p class="1stline"><span class="verse-nr">2 </span> Junk MTV quiz graced by fox whelps.</p> <p class="xline"> Bawds jog, flick quartz, vex nymphs.</p> <p class="1stline"><span class="verse-nr">3 </span> Waltz, bad nymph, for quick jigs vex!</p> <p class="xline"> Fox nymphs grab quick-jived waltz.</p> <p class="xline">Brick quiz whangs jumpy veldt fox.</p> <p class="xline">Bright vixens jump; dozy fowl quack.</p> <p class="1stline"><span class="verse-nr">4 </span>Quick wafting zephyrs vex bold Jim. </p> <p class="xline">Quick zephyrs blow, vexing daft Jim.</p>