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>

我尝试在console.log之后添加这行代码this.text(jQuery(lines).wrap('<span itemprop="recipeIngredient"></span>'));，但它只会出现一条错误，指出无法读取未定义的属性'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

而不是使用正则表达式，您可以在html上.split("<br>");。这会将br标签之间的每个部分推送到一个数组中。

然后你可以遍历数组并查看第一个char是否为数字。我使用了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并将它们包装在一个span中，然后将它们放入结果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>

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

1 个答案: