按br分割html，修剪它，然后添加span标签

Question

我正在尝试按br标签分割行，获取以数字开头的行，然后使用span标签进行换行。

  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> 

我试过添加以下代码this.text(jQuery(lines).wrap('<span itemprop="recipeIngredient"></span>')); 在console.log之后，但仅给出错误，提示无法读取未定义的属性“ ownerDocument”。

预期产量：

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>

请帮忙。

谢谢。

Answer 1

可以使用.split("<br>");代替使用正则表达式.split("<br>"); 在html上。 这会将br标签之间的每个片段推入数组。

然后，您可以遍历数组，查看第一个字符是否为数字。 我使用了jQuery的isNumeric ，还考虑了将小数字符转换为ASCII码并与之进行比较的方式。

接下来，只需创建跨度即可容纳具有适当属性和内部文本的新行，然后完成。

 $(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> 

更新 ：对于您在评论中的问题。 如果要使用列表，则可以使用jQuery获取所有li，并将它们包装在一个范围中，然后再将它们放置在结果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>