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

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 函数产生类似结果的帖子。我怀疑这些，因为没有实际的正则表达式。这似乎好得令人难以置信。

在图片中，可以看到绿色为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>s。 （如果 JavaScript 支持后向断言，一步完成会更容易；如果没有它们，它仍然是可能的，但会很麻烦。）

    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>");

我在构建这个时做了一些假设，您可能需要撤消这些假设：

1. 将一系列换行符视为一个换行符。
2. 删除- 前后的空格和制表符。

以下输入，

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

一句话，

1. 我们不再关心列表项的 set，只关心 每个 列表项，因此我们可以删除用于量化的不可捕获组,(?:...)+,

1234563 p>

2. 但是我们现在对捕获列表项文本感兴趣，因此我们添加了一个捕获组 (...)。

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）