javascript - 使用正则表达式解析 Javascript 中的 Wiki 标记

Question

我正在尝试使用 the Javascript Creole Wiki Markup Parser 解析一些 Wiki 风格的标记。我正在尝试扩展解析器来解析 div 标签，如下所示:

标记:<<此处的任何内容<<
HTML:<div class="left">content</div >

标记:>>此处的任何内容>>
HTML:<div class="right">content</div>

标记:^^ 此处的任何_内容 ^^
HTML:<div class="horz">content</div>

解析器使用正则表达式来解析标记，但正则表达式绝对不是我的强项，而且由于 js 文件几乎没有注释，我发现它特别难以编辑。我已经在这个人的博客上发帖寻求一些帮助，但由于该帖子已经发布了大约 2 年，我预计不会很快收到回复......

任何有关自定义此功能的帮助，或者如果有人可以指出已经支持 div 的 JavaScript 解析器，我们将不胜感激。

Answer 1

如果您不关心嵌套，您甚至不需要正则表达式。只需将“<< ”替换为“<div class='left'> ”，依此类推。

为了允许嵌套，您必须 (1) 更改标记，使结尾与开头不同(例如 <L> content </L> )和 (2) 运行正则表达式的次数与级别数相同。正则表达式(对于左侧 div)将是:

<L>(((?!</?L>).)*)</L>

替换字符串:

<div class="left">$1</div>

这是一个负责解析所有级别的函数:

function parseLeft(markup) {
  var regex = /<L>(((?!<\/?L>).)*)<\/L>/g;
  out = markup.replace(regex, '<div class="left">$1</div>');
  if (out.length == markup.length) {
    return out;
  } else {
    return parseLeft(out);
  }
}

实际示例:

> parseLeft('<L> Outer div <L>inner div</L>outer again </L>');
<div class="left"> Outer div <div class="left">inner div</div>outer again </div>