Estoy tratando de formatear el texto devuelto de una llamada API, sin embargo, lo que se devuelve tiene un formato deficiente y no tiene elementos css. Además, el único elemento html es un "< br >< br >" para dividir el contenido del cuerpo (tuvo que agregar los espacios para mostrar en la pantalla).
Lo que estoy tratando de hacer es asignar una clase cuando cada
es detectado.
Sin embargo, estoy luchando.
Lo que tengo hasta ahora.
<script> $(document).ready(function () { $('.text-wrapper').each(function(){ if ( $(this).is("<br><br>") ) { $(this).addClass("newclass"); } }) }); </script>Ejemplo del diseño con el que estoy trabajando.
<div class = "text-wrapper"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br> Vivamus pharetra at justo ut rhoncus. Suspendisse potenti. Morbi accumsan felis in mi aliquet, vitae efficitur nulla consectetur. Praesent in ante id purus consectetur maximus in et erat. <br><br> In eget augue ut tortor iaculis rutrum ultrices et nulla. In euismod ultrices erat, a bibendum metus egestas eget. Morbi eu viverra mauris, ut finibus velit. Etiam at erat rhoncus, porta ante non, placerat nibh. <br><br> Aenean eget lacus vitae neque fermentum pulvinar ut a mi. </div>Mi objetivo es tener una estructura similar a la siguiente como punto de partida.
<div class = "text-wrapper"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div class="newclass">Vivamus pharetra at justo ut rhoncus. Suspendisse potenti. Morbi accumsan felis in mi aliquet, vitae efficitur nulla consectetur. Praesent in ante id purus consectetur maximus in et erat.</div><div class="newclass">In eget augue ut tortor iaculis rutrum ultrices et nulla. In euismod ultrices erat, a bibendum metus egestas eget. Morbi eu viverra mauris, ut finibus velit. Etiam at erat rhoncus, porta ante non, placerat nibh. </div><div class="newclass"> Aenean eget lacus vitae neque fermentum pulvinar ut a mi.</div> </div>JS y JQuery todavía son muy nuevos para mí. Gracias.
Parece que tiene algunos saltos de línea dobles no deseados que desea reemplazar y convertir párrafos o secciones en divs.
Podría hacer algo como obtener el texto dentro de su contenedor de texto. Luego use la función Javascript string.split para eliminar el
y convierta esos párrafos en matrices, luego agregue un nuevo div con clase y reemplácelo nuevamente en el div textwrapper principal con $ .html
como esto :
<script> $(document).ready(function () { var before=$(".text-wrapper").html() // get text into variable var textArr=before.split("<br><br>") // create an array from your text and split it up by the unwanted words which will get removed as well var newDivsArr=[] $.each( textArr, function(i,val){ var newDiv=document.createElement("div") // create new element $(newDiv).addClass("newclass") // add class $(newDiv).html(val) // add text paragraph to new divs htmlcontents newDivsArr.push(newDiv) // add new div to an array of divs before looping back through the rest }) $(".text-wrapper").html(newDivsArr) // update your main div with new set of arrays } </script>Puede envolver el html mal formateado en <div class="newclass"></div> y luego reemplazar <br><br> con </div><div class="newclass"> , lo que dará como resultado un html con el formato correcto .
$('.text-wrapper').each(function() { this.innerHTML = ` <div class="newclass"> ${this.innerHTML.replace(/<br><br>/g, '</div><div class="newclass">')} </div>`; });https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions