javascript - 如何在元素上应用多个正则表达式？

Question

我是 JavaScript 新手。我正在尝试创建类似 stackoverflow 的文本区域之类的东西来编写问题答案。现在我有一些正则表达式:

text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
text.replace(/__(.*?)__/g, "<u>$1</u>");
text.replace(/\*(.*?)\*/g, "<i>$1</i>");
text.replace(/--(.*?)--/g, "<del>$1</del>");

我还有一个文本区域:

<textarea id="Q&A" name="txtarea" rows="4" cols="50"></textarea>

现在我想在点击事件(对于键盘上的每个按键)上的上面的textarea上应用这些正则表达式。我怎样才能做到这一点？

Answer 1

您可以使用 oninput-Event 来实现此目的:

function generate(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, "<code>$1</code>");
  text = text.replace(/>(.*?)(\n|$)+/g, "<blockquote>$1</blockquote>");
  document.getElementById("out").innerHTML = text
}

<textarea id="Q&A" oninput="generate(this.value)" name="txtarea" rows="4" cols="50"></textarea>
<div id="out"></div>