Question

使用以下html，我需要将<li>标记包装在以破折号开头的每一行周围，去除破折号，然后将整个列表包装在<ul>标记中。

<div class="json-content">
This line doesn't have a dash
This line also doesn't have a dash 
-An unordered list should start here because the line starts with a dash
-This line starts with a dash and has some dashes-in-the-middle
-Another line that starts with a dash
And another a line that doesn't have a dash.
</div>

我使用下面的代码（based on an earlier question）来实现此目的，但是当div中还有其他非破折号文本时，它也在这些行周围添加了<li>标签。我知道部分问题是它首先删除了破折号，但是我尝试使用正则表达式测试器对其进行修改，但我只是想不通。我该如何实现？

 $('.json-content').each(function() {
      var $this = $(this);

      $this.html(
        $this
          .html()
          .trim()
          .replace(/^-|[\r\n]+-/g, "\n")
          .replace(/[^\r\n]+/g, '<li class="item">$&</li>')    
          );
          $(this).find('li.item').wrapAll( "<ul class='json-list' />");  
    });

这里是一个小提琴：https://jsfiddle.net/9xd2vacj/2/

最终结果应如下所示：

这行没有破折号
这行也没有破折号


无序列表应从此处开始，因为该行以短划线开头

此行以短划线开头，中间有一些短划线

另一行以短划线开头


另外一行没有破折号。

Answer 1

您可以附加连字符^[ \t]*-.*以匹配以连字符开头的行。然后在捕获组中捕获列表项，并匹配0+倍的空白字符和连字符。

(<li class="item">)\s*-

在替换中，使用一个空字符串。

您的代码可能看起来像：

$('.json-content').each(function () {
    var $this = $(this);
    $this.html(
        $this
            .html()
            .trim()
            .replace(/^[ \t]*-.*/gm, '<li class="item">$&</li>')
            .replace(/(<li class="item">)\s*-/g, "$1")
    );
    $(this).find('li.item').wrapAll("<ul class='json-list' />");
});

Updated fiddle

$('.json-content').each(function () {
    var $this = $(this);
    $this.html(
        $this
            .html()
            .trim()
            .replace(/^[ \t]*-.*/gm, '<li class="item">$&</li>')
            .replace(/(<li class="item">)\s*-/g, "$1")
    );
    $(this).find('li.item').wrapAll("<ul class='json-list' />");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="json-content">
    This line doesn't have a dash
    This line also doesn't have a dash
    -An unordered list should start here because the line starts with a dash
    -This line starts with a dash and has some dashes-in-the-middle
    -Another line that starts with a dash
    And  a line that doesn't start with a dash but has-one in the middle.
</div>

Answer 2

您可以组合：

$('.json-content').html(function (idx, oldhtml) {
    return oldhtml.replace(/\n *-([^\n]*)/g, function(match, p1) {
        return '<li>' + p1 + '</li>';
    })
}).find('li').wrapAll("<ul/>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="json-content">
    This line doesn't have a dash
    This line also doesn't have a dash
    -An unordered list should start here because the line starts with a dash
    -This line starts with a dash and has some dashes-in-the-middle
    -Another line that starts with a dash
    And another a line that doesn't have a dash.
</div>

有条件地在<li>标记中换行并删除第一个字符

2 个答案: