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

是这是你要找的东西？它并不完美,但它确实是基础.

它的工作原理如下:

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