使用 JavaScript 从所有输入字段中修剪空格答案

【问题标题】：Trim white-spaces from all input fields using JavaScript使用 JavaScript 从所有输入字段中修剪空格
【发布时间】：2021-01-20 10:16:21
【问题描述】：

寻找纯 JavaScript 在 IE 中特别适用于从所有输入（文本和文本区域）中删除所有额外的空格。

这是可以使用的 jQuery 版本，但我想要它在 JavaScript 中：

function TrimText(el) {
 el.value = el.value.
 replace(/(^\s*)|(\s*$)/gi, ""). // removes leading and trailing spaces
 replace(/[ ]{2,}/gi, " "). // replaces multiple spaces with one space
 replace(/\n +/, "\n"); // removes spaces after newlines
 return;
}

将其转换为 JavaScript 的最佳方法是什么？

$j(function () {
 $j("textarea").change(function () {
    TrimText(this);
 });

 $j("input").change(function () {
    TrimText(this);
 });
});

【问题讨论】：

标签： javascript trim spaces

【解决方案1】：

如果您想将此应用于当前页面中的所有输入：

document.querySelectorAll('input, textarea').forEach(function(el) {
  el.addEventListener('change', function(ev) { TrimText(ev.target); });
});

如果要将其应用于页面中当前的所有输入，以及将来创建的所有输入：

document.addEventListener('change', function (ev) {
  if(ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA')
    TrimText(ev.target);
});

这是通过使用一种称为冒泡的机制来实现的。 Javascript 中的事件通过 DOM 冒泡，最终到达 document 元素。所以，我们监听document元素中的事件，并通过目标的标签名过滤事件。

这就是 JQuery 内部的工作方式，这种方法适用于您可以在 JQuery 中做的其他事情。

【讨论】：

【解决方案2】：

这是您所要求的一种简单的 JavaScript 方式。这会删除所有多余的空格，包括前导和尾随空格，并保留单个空格。

工作演示：

function removeWhiteSpaces(){
    var value = document.getElementById("text").value;
    document.getElementById("text").value = value.replace(/\s+/g,' ').trim();
}

<input type="text" id="text" value="  I am  a bad    text"/>
<button onclick="removeWhiteSpaces()">Remove White Spaces</button>

【讨论】：