Javascript 标记语言解析器

Question

我正在尝试使用 Javascript 构建自定义标记语言解析器。

例如：-

• **bold** ==> 粗体

• __italics__ ==> 斜体

为了显示解析后的文本，我尝试将特殊字符替换为 html标签，并将它们传递给label的innerHTML。

• **bold** ==> <b>bold</b>

我的第一种方法是只使用replace 函数，但这并不理想，因为它只能替换开始标记，而不是结束标记。

然后我找到了一个用 JS 正则表达式的临时解决方案，

const bold = /\*\*([A-z0-9]+)\*\*/gi
const italics = /\_\_([A-z0-9]+)\_\_/gi

const updateTextMessage = () => {
    let text = $('#textParser').val()
    text = text.replace(bold, '<b>$1</b>')
    text = text.replace(italics, '<i>$1</i>')
    $('#parsedText').html(text)
}

body{
display: flex;
flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="parsedText">Parsed text will appear here</span>
 <textarea id="textParser" oninput="updateTextMessage()" type="text" placeholder="Type Here"></textarea>

但是这段代码的问题是当我在中间给出一个句子时，它不起作用；

**This sentence should be bold** ==> 这句话要加粗

这不起作用。

我知道这是不允许这种情况发生的正则表达式，我也知道正则表达式的工作，即/\*\*(.*)\*\*/gim

但这也会转换不需要的情况。

例如，我不希望这些是有效的语法。

** hello**

** hello, this a sentence**

（区别在于特殊字符和文本之间的分隔。这有点类似于 WhatsApp 标记文本的工作方式。）

如何使用正则表达式解决这个问题？我也对其他方法感兴趣。

Answer 1

你已经很接近了！您只需进行一些更改，以保证双 * 或 _ 字符附近的第一个字母不是空格。

const bold = /\*{2}([A-Z0-9][A-Z0-9\s]+[A-Z0-9])\*{2}/gi 这分为：

1. 检查两个*
2. 检查第一个字符是否为字母数字。
3. 检查是否有一系列字母数字或空格字符。
4. 检查后面是否有字母数字。
5. 最后，检查这是否以两个 * 结尾。

const bold = /\*{2}([A-Za-z0-9][A-Za-z0-9\s]+[A-Za-z0-9])\*{2}/gi
const italics = /_{2}([A-Za-z0-9][A-Za-z0-9\s]+[A-Za-z0-9])_{2}/gi

const updateTextMessage = () => {
  let text = $('#textParser').val()
  text = text.replace(bold, '<b>$1</b>')
  text = text.replace(italics, '<i>$1</i>')
  $('#parsedText').html(text)
};

body {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="parsedText">Parsed text will appear here</span>
<textarea id="textParser" oninput="updateTextMessage()" type="text" placeholder="Type Here"></textarea>