Split html by br, trim it and then add span tags

Question

I'm trying to split lines by br tag, get the lines that start with a number and then wrap with span tags.

  jQuery(document).ready(function($) { var brExp = /<br\\s*\\/?>/i; var swn = /^\\d/; var lines = $('.caption').html().split(brExp).filter(line => swn.test(line.trim())); jQuery.each(lines, function() { console.log(this); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> ROLLS:⠀<br> <li> ¼ cup warm water</li>⠀<br> <li>1 tablespoon active dry yeast</li>⠀<br> <li> 2 ¼ cups sharp cheddar cheese, shredded⠀</li><br> 

I've tried adding this line of code this.text(jQuery(lines).wrap('<span itemprop="recipeIngredient"></span>')); after console.log but it only gives an error that says cannot read property 'ownerDocument' of undefined.

Expected Output:

ROLLS:⠀<br>
<li><span itemprop="recipeIngredient">1 tablespoon active dry yeast</li><br>


<li><span itemprop="recipeIngredient">1 teaspoon sugar</span></li><br>

<li><span itemprop="recipeIngredient">2 ¼ cups sharp cheddar cheese, shredded</span></li><br>

Please help.

Thanks.

Answer 1

Instead of using regular expressions you can .split("<br>"); on the html. This will push each piece between br tags into an array.

Then you can iterate through the array and see if the first char is a number. I used jQuery's isNumeric and also took into account your fraction characters by converting them to their ASCII code and comparing against that.

Next just create the span to house the new lines with the proper properties and inner text and then you're done.

 $(document).ready(function($) { let a = $("#recipe").html().split("<br>"); a.forEach(function(text) { if (text.trim().length === 0) return; let firstChar = text.trim()[0]; // char codes are for fractions ½, ¼, ¾ if ($.isNumeric(firstChar) || (firstChar.charCodeAt() >= 188 && firstChar.charCodeAt() <= 190)) { let $span = $('<span></span>').attr('itemprop', 'recipeIngredient').text(text); $("#result").append($span.prop('outerHTML') + "<br/>"); } }); }); 

 .hide { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="recipe" class="hide"> ROLLS:⠀<br> ¼ cup warm water⠀<br> 1 tablespoon active dry yeast⠀<br> 1 teaspoon sugar⠀<br> 1 cup milk⠀<br> 4 tablespoons butter, melted⠀<br> 1 egg, beaten⠀<br> 2 teaspoons salt⠀<br> 3 cups all-purpose flour⠀<br> 1 cup barbecue sauce⠀<br> 2 ¼ cups sharp cheddar cheese, shredded⠀<br> ½ cup green onions, chopped⠀<br> </div> <div id="result">ROLLS:<br/></div> 

Update : For your question in the comment. If you wanted to use a list you can use jQuery to get all the li's and wrap them in a span before placing them in the result div

 $(document).ready(function($) { let a = $("#recipe li") a.each(function(index, elem) { let text = $(elem).text(); if (text.trim().length === 0) return; let firstChar = text.trim()[0]; // char codes are for fractions ½, ¼, ¾ if ($.isNumeric(firstChar) || (firstChar.charCodeAt() >= 188 && firstChar.charCodeAt() <= 190)) { let $span = $('<span></span>').attr('itemprop', 'recipeIngredient').text(text); $("#result").append("<li>" + $span.prop('outerHTML') + "</li>"); } }); }); 

 .hide { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="recipe" class="hide"> ROLLS:⠀ <ul> <li>¼ cup warm water⠀</li> <li>1 tablespoon active dry yeast⠀</li> <li>1 teaspoon sugar⠀</li> <li>1 cup milk⠀</li> <li>4 tablespoons butter, melted⠀</li> <li>1 egg, beaten⠀</li> <li>2 teaspoons salt⠀</li> <li>3 cups all-purpose flour⠀</li> <li>1 cup barbecue sauce⠀</li> <li>2 ¼ cups sharp cheddar cheese, shredded⠀</li> <li>½ cup green onions, chopped⠀</li> </div> <div>ROLLS:</div> <ul id="result"> </ul>