Question

我需要编写一个代码，我用br分割html，找到以数字开头的行，然后添加span标记。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="caption">
    BBQ Porked Rolls.

    Ingredients:
    3 to 4 pounds pork shoulder<br />
    1 tablespoon salt<br />
    2 tablespoons brown sugar<br />

    STEPS:
    In the oven,... 
<div>

＆＃13;

我已经获得了这些线条，剩下的就是在这些线条周围添加span标签，而无需为结果创建新的div。也许完全使用replace()，wrap()或其他内容。这是我需要帮助的地方。

预期输出：

<span itemprop="recipeIngredient">3 to 4 pounds pork shoulder</span><br>
<span itemprop="recipeIngredient">1 tablespoon salt</span><br>
<span itemprop="recipeIngredient">2 tablespoons brown sugar</span><br>

由于

Answer 1

<强>更新

你可以试试这个：

jQuery(document).ready(function($)
{
    var html = '';

    var brExp = /<br\s*\/?>/i;
    var lines = $('.caption').html().split(brExp);
    jQuery.each(lines, function(index, value) {
        html += '<span>' + value + '</span></br>';
    });

    $('.caption').html(html);
});

Answer 2

你只需map()就收藏品。

jQuery(document).ready(function($) {
  var brExp = /<br\s*\/?>/i;
  var swn = /^\d/;
  var lines = $('.caption').html().split(brExp).map(function (line) {
        // strip the whitespace
        line = line.trim();
        // check for number
        if ( swn.test(line) ) {
          // add enclosing span
          line = '<span itemprop="recipeIngredient">' + line + '</span>';
        }
        // return the line for the new collection
        return line;
      }).join('<br />');
  $('.caption').html(lines);
});

如果您只想更改第一行，可以对代码进行以下微小更改：

jQuery(document).ready(function($) {
  var firstOnly = true; // will check for number when this value is true
  var brExp = /<br\s*\/?>/i;
  var swn = /^\d/;
  var lines = $('.caption').html().split(brExp).map(function (line) {
        // strip the whitespace
        line = line.trim();
        // check 'firstOnly' is true before checking for number
        if ( firstOnly && swn.test(line) ) {
          // add enclosing span
          line = '<span itemprop="recipeIngredient">' + line + '</span>';
          // first matching line has been modified
          // so set 'firstOnly' to false
          firstOnly = false;
        }
        // return the line for the new collection
        return line;
      }).join('<br />');
  $('.caption').html(lines);
});

Answer 3

另一种方法可能是使用.replace（），如你所说。

 jQuery(document).ready(function($)
    {

       var text = $(".caption").html();

       var newText = text.replace( /(\d+.+)(<br)/g, '<span itemprop="recipeIngredient">$1</span>$2');

       console.log(newText);

       $(".caption").html(text);

    });

正则表达式必须修复一点，但我认为这种方法是有效的。

https://jsfiddle.net/g6yegh1f/

Answer 4

使用此链接进行数字检查，然后将数据附加到范围标记https://codepen.io/anon/pen/ZoaXYR?editors=1010

var data = `3 to 4 pounds pork shoulder<br />1 tablespoon salt<br />2 tablespoons brown sugar<br />`;
var brExp = /<br\s*\/?>/i;
var swn = /^\d/;
var lines = data.split(brExp).filter(line => swn.test(line.trim()));
        $.each(lines, function() {
            var ff = Number(this[0]);
            alert(typeof(ff));
            if(typeof(ff) == "number") {
                alert("success");
                $("#first").append("<span id='test'>" +this+"</span>");
            }
        });

Answer 5

我可能会这样做：

＆＃13;

jQuery(document).ready(function($) {
  var brExp = /<br\s*\/?>/i;
  var swn = /^\d/;
  var lines = $('.caption').html().split(brExp)
  //create span
  lines=  lines.map( line =>$('<span />').prop('itemprop','recipeIngredient').html(line))//.join('<br />'); 
  //empty the div
  $('.caption').empty();
  jQuery.each(lines, function() {
        $('.caption').append(this);
		$('.caption').append('<br />');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="caption">
3 to 4 pounds pork shoulder<br />
1 tablespoon salt<br />
2 tablespoons brown sugar<br />
<div>

＆＃13;

Answer 6

您可以使用索引查找与0键对应的值，检查它是否为数字，然后使用append / before方法绑定相同的值。

在元素中查找行，然后使用<span>标记将其换行

6 个答案: