在contenteditablle中,只有第一行过滤正则表达式而第二行无法过滤

问题描述 投票:0回答:1

参考我之前的问题:

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>
javascript html css
1个回答
0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.