Question

我正在查看极少量的代码：

var val = $("#id_input").val();
$("#output").text(val);

基本上将输入输入到字段<textarea id="id_input"></textarea>中，然后输出它，就像它一样。

我要做的是将以-开头的输入换行符转换为我网站上的输出<ul><li></li></ul> ....

我一直在进行的方法是按行分割输入，然后在通过每行之后将它们连接起来：

function startsWith(string, pattern) {
  return string.slice(0, pattern.length) == pattern;
}

show(startsWith("-"));

我觉得有更标准的方法吗？例如，我已阅读StackOverflow上使用find函数生成类似结果的其他帖子。我怀疑这些，因为没有真正的正则表达式。这似乎太好了。

enter image description here

在图片中，您可以看到绿色文字为comments，白色文字为input，黑色文字为output。

我知道现有技术具有此功能，但它们还具有许多其他功能。我正在尝试创建一个隔离此功能的输入。

Answer 1

uls = val.replace(/(^-.*$(?:\n^-.*$)*)/mg, "<ul>\n$1\n</ul>")
lis = uls.replace(/^-(.*)$/mg, '<li>$1</li>')
$("#output").html(val);

this您要找的是什么？它并不完美，但它具有基础。

它的工作原理如下：

Surround the would be lists with <ul></ul>
    This works by finding lines that start with a '-' |^-.*$|,
    then matching contiguous, similar lines |(?:\n^-.*$)| 0 or more times |*|
    it uses the multiline (m) and global (g) flags too:
      match ^ and $ at the begining and end of lines (m)
      and get all the ones in the string (g)
    surround them (<ul>\n$1\n</ul>)
Surround the list items with <li></li>
     match lines with a hyphen at the beginning |^-(.*)$|
     surround them (<li>$1</li>)

Answer 2

这是一个你可以自己调整的开始：jsFiddle。

我是在两次替换中完成的，首先添加<ul></ul>，然后添加<li></li>。（如果JavaScript支持lookbehind断言，那么一步完成会更容易;如果没有它们，它仍然可能但是很麻烦。）

    val = val.replace(/((?:(?:^|[\n\r]+)[\t ]*-[\t ]*[^\n\r]*)+)/g, "\n<ul>\n$1\n</ul>");
    val = val.replace(/[\n\r]+[\t ]*-[\t ]*([^\n\r]*)/g, "\n  <li>$1</li>");

我在构建它时做了一些假设，你可能需要撤消：

将一系列换行视为一个换行符。
删除-。

以下输入，

hello, world.
- two
- things
hi, again.
- three
 -more 
-things

创建以下输出：

hello, world.
<ul>
  <li>two</li>
  <li>things</li>
</ul>
hi, again.
<ul>
  <li>three</li>
  <li>more </li>
  <li>things</li>
</ul>

<强>说明

第一个正则表达式只是识别列表项的集。

(                   Captured group ($1).

    (?:             Group (one list item). -------------------+
                                                              |
        (?:         Group (for alternation). ---------+       |
                                                      |       |
            ^       Start-of-string                   |       |
                                                      |       |
            |           OR                      <-----+       |
                                                              |
            [\n\r]+     one or more newlines.                 |
                                                              |
        )                                                     |
                                                              |
        [\t ]*      (Ignore tabs and spaces.)                 |
        -           (Dash.)                                   |
        [\t ]*      (Ignore tabs and spaces.)                 |
                                                              |
        [^\n\r]*    List item text (everything but newlines). |
                                                              |
    )                                                         |
    +               One or more list items. <-----------------+

)

$1中捕获的集列表项包含在<ul></ul>标记中：

"\n<ul>\n$1\n</ul>"

第二个正则表达式将每个列表项包装在<li></li>标记中，并且与第一个非常相似，因此显示已更改的内容可能更有用：

first regex  : /((?:(?:^|[\n\r]+)[\t ]*-[\t ]* [^\n\r]* )+)/g
differences  :  xxxxxxxxx       x             (        )xxx
second regex : /         [\n\r]+ [\t ]*-[\t ]*([^\n\r]*)   /g

用语言说，

我们不再关心列表项的 set ，只关注每个列表项，因此我们可以删除用于量化的不可捕获组，(?:...)+，
在第一个正则表达式替换（前置\n<ul>\n之后）之后，列表项不可能从字符串的开头开始，因此我们可以放弃交替，{{1} }，
但是我们现在有兴趣捕获列表项文本，因此我们添加了一个捕获组(?:^|...)。

Answer 3

你有没有理由使用正则表达式？虽然它们很好，因为它们高效而简洁，但如果我以后再回到它们身上，我会发现它们很难读。

我可能会像你一样处理问题，只是我将每个列表项包装在自己的列表中以处理子列表：

<ul><li>item 1</li></ul>
<ul><li>item 2</li></ul>

而不是：

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

优雅地处理列表和非列表项的混合。我不会使用这种方法的唯一原因是我以后必须一起操作列表中的所有内容（例如 - 样式化第一个列表而不是第二个列表）。

Example in JsFiddle（感谢FrankieTheKneeMan获取ul的css）

jquery，解析部分文本输入到格式化的html输出？

3 个答案: