如何在文本区域中拆分段落行。请使用纯Javascript

Question

我试图用JavaScript编写一个简单的markdown。将段落行拆分为新行时遇到问题。

我的代码：

function parseStr(str) {
  str.replace(/(.+)/gm, '<p>$1</p>');
}

var t = document.getElementById("textbox");

t.addEventListener("keyup", function() {

  var reOut = parseStr(t.innerText);

  document.getElementById("div1").innerHTML = reOut;

});

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

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

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

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

Answer 1

通过阅读代码，我发现您的主要问题是您没有从parseStr函数返回任何内容。

尝试返回替换的字符串：

function parseStr(str) {
  return str.replace(/(.+)/gm, '<p>$1</p>');
}

此问题已修复，并对代码进行了一些小的更改以提高可读性，现在可以正常工作，请参见示例：

const inputDiv = document.querySelector("#textbox");
const outputDiv = document.querySelector("#div1");

function parseStr(str) {
  return str.replace(/(.+)/gm, '<p>$1</p>');
}


inputDiv.addEventListener("keyup", function() {
  var reOut = parseStr(this.innerText);
  outputDiv.innerHTML = reOut;
});

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

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

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

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

注意：

  

如果您要处理大量数据（在这种情况下为文本），我不建议使用innerHTML + RegEx。

之所以这样，是因为它们都很慢，并且可能会对您的应用程序性能产生小的影响。

替代：

• 要替换正则表达式，请执行以下操作： 使用JavaScript的split()函数检索可编辑div中的行。

• 要替换innerHTML： 使用JavaScript的createElement("p")创建段落，并使用innerText附加文本。

• 要附加到您的输出div： 使用element.append([Elements Object])代替element.innerHTML。

其原因是，使用innerHTML的任务是将所有内容解析为HTML（即使只是文本）到JavaScript。这并不意味着JavaScript无法处理HTML解析，它可能会影响您的应用程序性能。这就是为什么如果您还不知道的话，这篇便条就是建议。

使用str.replace()时，RegEx也会发生同样的事情。

替代示例：

const inputDiv = document.querySelector("#textbox");
const outputDiv = document.querySelector("#div1");

function parseStr(event){
  let str = event.target.innerText;
  //Clear the output first
  outputDiv.innerText = "";
  //Obtain every line break inside your editable div
  //and filter it (when pressing enter and not typing yet)
  let lines = str.split("\n").filter(l=>l!="");
  //Create a paragraph in JS for every line and 
  //append it to your output div
  lines.forEach((line)=>{
    let pElement = document.createElement("p");
    //Use innerText for the paragraph since you don't
    //need to have any other HTML inside it
    pElement.innerText = line;
    outputDiv.append(pElement);
  });
}

inputDiv.addEventListener("keyup", parseStr);

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

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

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

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