如何使用 JavaScript 删除文本区域中的空白行？ [关闭]

Question

我通过以下方式获取文本区域的内容：

var stringArray = document.getElementById('textarea').value;

我必须删除所有空行（即使是带有空格的空行）。有什么有效的方法来做到这一点？

编辑：我想删除空白行，而不是空格。

例如

A
  B

C

D

到

A
  B
C
D

Answer 1

最后我设法让它工作了。这是代码，以防其他人需要它：

function delBlankLines() {
 var stringArray = document.getElementById('textarea').value.split('\n');
 var temp = [""];
 var x = 0;

 for (var i = 0; i < stringArray.length; i++) {
   if (stringArray[i].trim() != "") {
     temp[x] = stringArray[i];
     x++;
   }
 }

 temp = temp.join('\n');
 document.myform.textarea.value = temp;
}

因此，textarea 内容被拆分为一个字符串数组，该数组被循环并检查修剪的当前行是否为空白；如果不是，则将该行复制到一个临时字符串数组（基本上空白行被忽略）。最后，我用临时字符串数组更新了 textarea。

Answer 2

您可以使用原生 JavaScript 修剪方法（可用于字符串原型）：textareaValue.trim()。

琐事：window.textarea 自动设置为document.getElementById('textarea')。因此，您只需执行textarea 即可访问它。因此，要访问 textarea 的文本内容，您可以使用：textarea.innerHTML 或 const textAreaValue = textarea.value。

接下来，运行textAreaValue.trim(); 这将消除任何外部空白。 " \n\n textArea \n\n\t\n " 将变成 "textArea"。

好的，现在我们可以在新行上拆分：const stringArray = textAreaValue.split('\n')。因为\n 是回车又名换行符。

接下来，我们将要跳过除了空格之外什么都没有的行，我们可能可以通过几种方式找到这些行，但为了最安全，\S 应该可以工作。要测试不同的正则表达式，我推荐：regex101.com。

对于更现代的版本：

textarea.value = `
  
    the
      quick
   brown
   fox
    jumped
      over the lazy
  dog.
  
  `;

/*
function oldSolution() {
  var cleanedString = '';
  console.log(textarea.value);
  var stringArray = textarea.value.trim().split('\n'); 
  for(var i = 0; i < stringArray.length; i++){
    var line = stringArray[i];
    if(line.match('/\S/') !== -1){
      cleanedString += line.trim();
    }
  }
  console.log(cleanedString);
  output.innerText = cleanedString;
  return cleanedString;
}
*/
const cleanText = () => {
  const stringArray = textarea.value
    .trim()
    .split('\n')
    .filter(line => /\S/.test(line));
  console.log({stringArray})
  const cleanedString = stringArray.map(line => line.trim()).join(' ');
  console.log(cleanedString);
  output.innerText = cleanedString;
  return cleanedString;
}

<textarea rows='5' cols='50' id='textarea'></textarea>
<input type='button' value='Extract Text' onclick='cleanText()'/>
<div id="output"></div>