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

Question

我正在尝试将每 20 个字符包装在一个新的 div 容器中。我不断得到 undefined 我从尚不存在的数组结果中假设。如何在用户键入时每 20 个字符包装一次并达到字符 20、40、60 和 80，并将其放入 div 容器中，最大允许字符数为 80，是否有更好的方法来执行此操作而不是在 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

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

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

我们在 space 上拆分，然后遍历单词，我们重建字符串，但在到达 'paragraphlength' 时将结果推送到数组中。然后你会得到一个 20 个字长的字符串数组。

此处未涵盖一些边缘情况，根据您的用例，这些情况可能不是问题。例如，如果用户只是输入难以辨认的字符，ect

怎么办？

//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>

Answer 2

您可以像在问题中所做的那样只监听 keydown 事件，然后使用 substring 获取和删除字符串的第一部分。然后可以将第一部分附加到容器中，字符串的其余部分（在大多数情况下只有 1 个字符）可以设置为 input-element.

的内容

您还应该考虑使用 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>

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

How to group text being typed into an array and wrap every 20 chars in a div

html

javascript

css

arrays

contenteditable