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

Question

寻找纯 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);
 });
});

Answer 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 中执行的其他操作。

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