javascript - 使用 js 正则表达式将 **bold** 之类的简单标记样式替换为粗体

Question

我正在尝试获取一大块纯文本并将其中的一部分转换为 html 标签。我不需要一个完整的富编辑器，只需要这几个标签：

**bold**
__underline__
~~italics~~
--strike--
<<http://www.link.com>>

这是我尝试编写的方法，但我缺乏 regex/js 似乎阻碍了它：

function toMarkup($this) {
    var text = $this.text();
    text = text.replace("\*\*(.*)\*\*", "<b>$1</b>");
    text = text.replace("__(.*)__", "<u>$1</u>");
    text = text.replace("~~(.*)~~", "<i>$1</i>");
    text = text.replace("--(.*)--", "<del>$1</del>");
    text = text.replace("<<(.*)>>", "<a href='$1'>Link</a>");
    $this.html(text);
}

关于为什么这些替换不起作用的任何明显错误？我刚刚意识到的另一个问题是，通过将此文本转换为 html，我正在取消转义任何其他可能是恶意的潜在标签。奖励将是关于如何仅逃避这些元素而不是其他任何建议的任何建议。

Answer 1

首先，它们只是字符串，而不是正则表达式。其次，您应该使用 not-greedy .*。

此外，您可能希望使用g修饰符来匹配文本中的每个出现。

function toMarkup($this) {
    var text = $this.text();
    text = text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
    text = text.replace(/__(.*?)__/g, "<u>$1</u>");
    text = text.replace(/~~(.*?)~~/g, "<i>$1</i>");
    text = text.replace(/--(.*?)--/g, "<del>$1</del>");
    text = text.replace(/<<(.*?)>>/g, "<a href='$1'>Link</a>");
    $this.html(text);
}

Answer 2

使用 Regexp 对象作为第一个参数text.replace()而不是字符串：

function toMarkup($this) {
    var text = $this.text();
    text = text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
    text = text.replace(/__(.*?)__/g, "<u>$1</u>");
    text = text.replace(/~~(.*?)~~/g, "<i>$1</i>");
    text = text.replace(/--(.*?)--/g, "<del>$1</del>");
    text = text.replace(/<<(.*?)>>/g, "<a href='$1'>Link</a>");
    $this.html(text);
}

请注意，我还替换了所有.*将.*?匹配尽可能少的字符的字符，否则您的匹配项可能会太长。例如，您将从第一个匹配**到最后一个，**而不是在下一个停止。正则表达式还需要该g标志，以便替换所有匹配项（感谢 Aaron）。

Answer 3

 function toMarkup($this) {
   $this.html ($this.text ().replace (/(__|~~|--|\*\*)(.*?)\1|<<(.*?)>>\/g, 
     function (m, m1, m2, m3) {
       m[1] = {'**' : 'b>', '__': 'u>', '--': 'del>', '~~': 'i>'}[m[1]];
       return m[3] ? '<a href="' + m[3] + '">Link</a>'
                   : ('<' + m[1] + m[2] + '</' + m[1]);
     });
   }

请注意，您不能嵌套这些，即如果您说__--abc--__将转换为<u>--abc--</u>.