Javascript 标记语言解析器

Question

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

例如：-

**bold** ==> 加粗
__italics__ ==> 斜体

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

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

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

然后我用JS regex找到了一个临时解决方案，

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

const updateTextMessage = () => {
    let text = $('#textParser').val()
    text = text.replace(bold, '<b></b>')
    text = text.replace(italics, '<i></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

你非常接近！您只需要进行一些更改，以保证双 * 或 _ 字符附近的第一个字母不是白色 space.

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

检查两个 *
检查第一个字符是否为字母数字。
检查是否有一系列字母数字或 space 个字符。
检查后面是否跟有字母数字。
最后，检查这是否以两个 *.

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></b>')
  text = text.replace(italics, '<i></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>

Javascript 标记语言解析器

Javascript Markup Language Parser

javascript

regex

text-parsing