如何将输入的文本分组到数组中并在 div 中每 20 个字符换行

Question

我试图将每 20 个字符包装在一个新的 div 容器中。我一直不确定我从尚不存在的数组结果中假设。如何在用户键入时包装每 20 个字符并达到字符 20、40、60 和 80 并将其放入最大允许字符为 80 的 div 容器中，有没有比写出更好的方法数组组手动按 20 秒。

function creaeTextField(clicked_id) {
  var dropArea = document.getElementById('headarea');
  var myArea = document.createElement('div');
  var myAreaOuter = document.createElement('div');

  myArea.className = "areaClass";
  myAreaOuter.className = "areaClassOuter";

  myArea.id = "areaClass";
  myAreaOuter.id = "areaClassOuter";

  myArea.contentEditable = "true";

  if (clicked_id == 'text') {
    myAreaOuter.appendChild(myArea);
    dropArea.appendChild(myAreaOuter);

    myArea.addEventListener("keydown", findLimitb);
    myArea.addEventListener("keyup", findLimitb);

    var style = window.getComputedStyle(myArea, null).getPropertyValue('font-size');
    var fontSize = parseFloat(style);

    function findLimitb() {
      if (myArea.offsetHeight <= fontSize * 4) {
        myArea.addEventListener("keydown", breaker);
      } else {
        if (event.keyCode === 8 || event.keyCode === 46 || event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40) {
          myArea.focus();
        } else {
          myArea.removeEventListener("keydown", breaker);
          event.preventDefault();
          myArea.style.height = fontSize * 4 + "px";
        }
      }
    }

    function breaker() {
      var myAr = myArea.innerHTML.split("");
      var divCon = document.createElement('div');
      myArea.appendChild(divCon);
      if (myArea.innerHTML.length > 20) {
        divCon.innerHTML = myAr[0] + myAr[1] + myAr[2] + myAr[3] + myAr[4] + myAr[5] + myAr[6] + myAr[7] + myAr[8] + myAr[9] + myAr[10] + myAr[11] + myAr[12] + myAr[13] + myAr[14] + myAr[15] + myAr[16] + myAr[17] + myAr[18] + myAr[19] + myAr[20];
      }
    }

  }
}

.headarea {
  width: 100%;
  height: 130px;
  float: left;
}

.buttonStyle {
  width: 60px;
  height: 25px;
  float: left;
}

.areaClassOuter {
  float: left;
  padding: 10px;
  position: relative;
  z-index: 29;
  border: 1px #000000 solid;
}

.areaClass {
  min-width: 100px;
  max-width: 310px;
  min-height: 60px;
  max-height: 100px;
  float: left;
  padding: 7px;
  position: relative;
  z-index: 30;
  border: 1px #000000 solid;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 24pt;
  text-align: center;
}

<div class="headarea" id="headarea"></div>
<button class="buttonStyle" id="text" type="button" onclick="creaeTextField(this.id)"></button>

Answer 1

您可以像在问题中所做的那样只收听keydown-event，然后使用substring 获取并删除字符串的第一部分。然后可以将第一部分附加到容器中，然后将字符串的其余部分（大多数情况下只有 1 个字符）设置为输入元素的内容。

您还应该考虑使用textContent 而不是innerHtml，以便用户能够安全地输入html 使用的字符。

let textOutput = document.getElementById('textOutput');
let textInput = document.getElementById('textInput');
let maxInputLength = 20;
let maxOutputElement = 4; // 4*20 = 80 Chars

textInput.addEventListener('keydown', function(event) {
  if (textOutput.children.length >= maxOutputElement) {
    event.preventDefault();
    textInput.textContent = '';
  }
  let textChanged = false;
  let text = textInput.textContent;
  while (text.length >= maxInputLength) {
    let firstPart = text.substring(0, maxInputLength);
    let textElement = document.createElement('div');
    textElement.textContent = firstPart;
    textElement.contentEditable = true;
    textElement.addEventListener('keyup', function(event) {
      let editText = event.currentTarget.textContent;
      if (editText.length >= maxInputLength) {
        event.currentTarget.textContent = editText.substring(0, maxInputLength);
      }
    });
    textOutput.appendChild(textElement);
    text = text.substring(maxInputLength);
    textChanged = true;
  }
  if (textChanged) textInput.textContent = text;
});

#textOutput div {
  display: inline-block;
  margin: 5px;
  background-color: #EEE;
}

#textInput {
  display: block;
  width: 160px;
  height: 20px;
  background: #EEE;
  border: 1px dashed #CCC;
}

<div id="textOutput"></div>
<div id="textInput" contenteditable="true"></div>

Answer 2

您可以将字符串拆分为空格并使用模数来查看何时达到 20 项。

这使代码独立，并允许您更改每个字符串中允许的单词数。

我们在空间上分割然后迭代单词，我们重建字符串，但当我们达到“段落长度”时将结果推送到一个数组中。然后你会得到一个 20 字长的字符串数组。

这里没有涵盖一些边缘情况，根据您的用例，它们可能不是问题。例如，如果用户只是输入了难以辨认的字符，等等

//The wording as a string
const words = "this is a really long set of words that need to be broken down into a paragraphs array that has lots of words that need to be broken down into a nicer structure for users to easier consume. We split on the space and then iterate over the words, we reconstruct the string but push the results into an array when we reach the 'paragraphlength'";

const getParagraphs = (words, paragraphLength) => {
  let paragraphs =[];
  words.split(" ").reduce((memo, word, index) => {
    if(index > 0 && index % paragraphLength === 0)
    {
        paragraphs.push(memo);
        memo = "";
    }
    return memo + " " + word;
  }, "");
  return paragraphs
}

const paragraphs = getParagraphs(words, 20);
console.log("original string ===>", words);
console.log("paragraphs array ===>", paragraphs);
//below is for display purposes only
let results = document.getElementById('results');
paragraphs.forEach(paragraph => {
  const para = document.createElement("p");
  const node = document.createTextNode(paragraph);
   para.appendChild(node);
   results.appendChild(para);
});

<div id="results">
</div>