javascript - 在contenteditable中，只有第一行过滤正则表达式，第二行过滤失败

Question

关于我之前的问题:

How can I retrieve text, line by line, from 'contenteditable' to variables in pure javascript, no jquery

div1 和 div2 中的第一行用正则表达式过滤，第二行不过滤，按文本框中的原样打印。

我正在尝试用纯 JavaScript 开发一个 markdown 预览器。

var t = document.getElementById("textbox");
document.addEventListener("keyup", function() {
  var t1 = t.textContent;
  var h1 = t1.replace("/[#]{1}(.+)/g", "<h1>$1</h1>");
  document.getElementById("div1").innerHTML = h1;
  document.getElementById("div2").innerHTML = h1;
});

.box {
  display: flex;
  height: 100%;
  margin: 0;
}

.subbox {
  width: 100%;
  margin: 10px;
  border: solid #981b1e;
}

#textbox,
#div1,
#div2 {
  height: 100%;
}

<div class="box">
  <div class="subbox" id="textbox" contenteditable="true"></div>
  <div class="subbox" id="div1"></div>
  <div class="subbox" id="div2"></div>
</div>

Answer 1

所以，如果我做对了，你想要做的是:

1 - 打印 div1 中输入的第一行，由正则表达式过滤。

2 - 在不过滤的情况下打印 div2 中输入的第二行。

我会做的是按换行符拆分并分别处理每一行。

var t = document.getElementById("textbox");
document.addEventListener("keyup", function() {
  var t1 = t.textContent;
  //something like:
  var t1_array = t1.split("\n");
  var line1 = t1_array[0];
  var line2 = t1_array[1];

  var h1 = line1.replace("/[#]{1}(.+)/g", "<h1>$1</h1>");
  document.getElementById("div1").innerHTML = h1;
  document.getElementById("div2").innerHTML = line2;
});

(未测试。只是想给出一些方向)