I am trying to format the returned text from an API call, however what is being returned is poorly formatted and does not have css elements. Additionally, the only html element is a "< br >< br >" to break up the body content (had to add the spaces to display on screen).
What I am trying to do is assign a class when each
is detected.
I am however struggling.
What I have so far.
<script>
$(document).ready(function () {
$('.text-wrapper').each(function(){
if ( $(this).is("<br><br>") )
{
$(this).addClass("newclass");
}
})
});
</script>
Example of the layout that I am working with.
<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>
I am aiming to have a structure similar to the following as a starting point.
<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 and JQuery is still very much new to me. Thank you.
Sounds like you have some unwanted double line breaks that you want to replace and convert paragraphs or sections to divs.
I might do something like get the text inside your text wrapper did. Then use Javascript string.split function to to remove the
and convert those paragraphs into arrays then add a new div with class and replace it back into the main textwrapper div with $.html
like this :
<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>
You could wrap the poorly formated html in <div class="newclass"></div> and then replace <br><br> with </div><div class="newclass">, which will result in properly formatted html.
$('.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