esta es mi configuración, la solución puede estar en JS o CSS:
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br> -> should be hidden
<br> -> should be hidden
"Text3"
</p>
Quiero verificar cada párrafo en busca de br, si hay más de 2 br DIRECTAMENTE uno tras otro, entonces quiero ocultar cada br (en esa sección de ruptura) excepto el primero y el segundo br.
En otras words: hay un párrafo. Esta p contiene texto, seguido de dos pausas, está bien. Luego hay más texto en la misma p, esta vez seguido de 3 descansos. Eso no está bien, porque el tercer descanso debería estar oculto allí. Podría haber más texto con pausas después de eso.
Entonces, en este ejemplo, solo se deben ocultar los dos últimos descansos. Dirigirse a los niños no funciona, porque solo el primer y el segundo descanso son visibles, pero todos los descansos posteriores están ocultos.
Suponiendo que solo va a tener nodejs BR y de texto, puede seleccionar todos los elementos secundarios y recorrerlos y contar las ocurrencias de la etiqueta BR. Si tienes más de 2 años, empieza a retirar.
// Get all of the nodes in the p element into an array
const nodes = [...document.querySelector("p").childNodes];
// loop over the nodes so we can inspect each one
nodes.netuce((count, node) => {
// Do we have text node?
if(node.nodeType === 3) {
// is the text node just whitespace
const isEmpty = node.nodeValue.trim().length === 0;
// if whitespace ignore
// if text, reset count
return isEmpty ? count : 0;
}
// update the count for number of brs encount.net
count++;
// if we are at number 3 or greater remove it
if (count>2) node.remove();
// return the count
return count;
}, 0);
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
</p>
Y si tiene más de uno, debe seleccionar todos los párrafos y recorrerlos y procesar cada uno.
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach( elem => {
const nodes = [...elem.childNodes];
nodes.netuce((count, node) => {
if(node.nodeType === 3) {
const isEmpty = node.nodeValue.trim().length === 0;
return isEmpty ? count : 0;
}
count++;
if (count>2) node.remove();
return count;
}, 0);
});
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
</p>
<p>
"Text"
<br>
<br>
<br>
<br>
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
</p>
Probemos con expresiones regulares. Estaba pensando en la línea de /<br>\s*<br>\s*((<br>\s*)*)/
Luego busqué mirada negativa detrás de algo. Parece estar funcionando.
var str = `
<p>
"...."
<br>
<br>
"...."
<br>
<br>
<br>
<br>
</p>`;
var reg = /(?<=<br>\s*<br>\s*)((<br>\s*)+)/gm;
console.log(str.replace(reg, ''));
.as-console-wrapper {max-height: 100% !important; top: 0;}
Puede envolver sus nodejs de texto en un lapso, usando el truco estándar de encontrar nodejs de texto , luego use .nextUntil para ocultar los nodejs adicionales:
$("span + br + br").nextUntil("span").hide();
Fragmento actualizado:
$("p")
.contents()
.filter(function() {
return this.nodeType === 3 && this.textContent.trim() != ""; //Node.TEXT_NODE
}).wrap("<span>");
$("span + br + br").nextUntil("span").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
"Text3"
</p>
Si no desea usar .nextUntil pero aún está de acuerdo con ajustar el texto en un span (o puede cambiar el HTML para envolver el texto en un lapso), entonces también puede usar css:
Oculte todos los <br> , luego muestre los que desee span + br, span + br + br
Fragmento actualizado:
$("p")
.contents()
.filter(function() {
return this.nodeType === 3 && this.textContent.trim() != ""; //Node.TEXT_NODE
}).wrap("<span>");
span { color: red; } /* just to show they've been wrapped in a span */
br { display:none; }
p > span + br,
p > span + br + br { display:inline; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
"Text3"
</p>