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

Question

我正在尝试用 JavaScript 编写一个简单的降价。将段落行拆分为新行时遇到问题。

我的代码：

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>

标签： javascripthtmlcss

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。

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

选择：

• 替换 RegEx 的使用： 使用 JavaScript 的split()函数来检索可编辑 div 中的行。

• 要替换 innerHTML： 使用 JavaScript 创建段落createElement("p")并使用innerText.

• 附加到您的输出 div： 使用element.append([Elements Object])而不是element.innerHTML.

这样做的原因是 usinginnerHTML将所有内容作为 HTML（即使它只是文本）解析为 JavaScript 的任务。这并不意味着 JavaScript 不能处理 HTML 解析，它只是可能会影响您的应用程序性能。这就是为什么如果你还不知道的话，这篇笔记只不过是一个建议。

RegEx 在使用str.replace().

替代示例：

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>