使用js regex将简单标记样式（如** bold **）替换为<b>粗体</b>

Question

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

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

这是我试图写的方法，但我缺乏正则表达式/ 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

首先，它们只是字符串，而不是正则表达式。其次，你应该使用非贪婪的.*。

此外，您可能希望使用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进行匹配，而不是停留在下一个{{1}}。正则表达式还需要{{1}}标志，以便替换所有匹配项（感谢Aaron）。

Answer 3

您在字符串文字语法中使用正则表达式语法而不是正则表达式文字语法。

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

如果你想从字符串创建一个正则表达式，你需要使用RegExp构造函数，但是你还需要转义\个字符以获得反斜杠在正则表达式。

---

你也应该让你的.*非贪婪...... .*?。

Answer 4

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