javascript - 如何拆分文本区域中的段落行。请使用纯 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>

注意:

I would not recommend using innerHTML + RegEx if you are going to work with large amount of data (in this case, text).

原因是它们都很慢并且可能对您的应用程序性能影响很小。

替代方案:

• 要替换正则表达式的使用: 使用 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>