如何删除input type="text"输入框中的多余空格？

嘿，这是个很常见的需求，我给你分几种场景来提供实用方案，你可以根据自己的需求选择：

1. 只去除首尾的多余空格 #

如果你的需求只是去掉输入内容开头和结尾的空格，中间的单个空格保留，那用JavaScript原生的trim()方法就足够简单高效了。

示例代码：

<input type="text" id="userInput">
<button id="showBtn">展示内容</button>
<p id="displayArea"></p>

<script>
const input = document.getElementById('userInput');
const btn = document.getElementById('showBtn');
const display = document.getElementById('displayArea');

btn.addEventListener('click', () => {
  // 获取输入值并去除首尾空格
  const cleanedValue = input.value.trim();
  // 展示处理后的内容
  display.textContent = cleanedValue;
});
</script>

2. 去除所有连续的多余空格（包括中间） #

如果要把输入里的多个连续空格（不管是首尾还是中间）都换成单个空格，那可以结合trim()和正则表达式来处理：

示例代码：

<input type="text" id="userInput">
<button id="showBtn">展示内容</button>
<p id="displayArea"></p>

<script>
const input = document.getElementById('userInput');
const btn = document.getElementById('showBtn');
const display = document.getElementById('displayArea');

btn.addEventListener('click', () => {
  // 先去首尾空格，再把所有连续的空白字符（包括空格、制表符等）换成单个空格
  const cleanedValue = input.value.trim().replace(/\s+/g, ' ');
  display.textContent = cleanedValue;
});
</script>

这里的/\s+/g正则表达式会匹配一个或多个连续的空白字符（包括空格、换行、制表符等），g表示全局替换，把它们都换成单个空格。如果只想匹配空格（排除换行、制表符），可以把正则改成/ +/g。

3. 实时处理输入（无需点击按钮） #

如果你想让用户输入的时候就自动去除多余空格，不用等点击按钮，可以监听输入框的input事件：

<input type="text" id="userInput">
<p id="displayArea"></p>

<script>
const input = document.getElementById('userInput');
const display = document.getElementById('displayArea');

input.addEventListener('input', () => {
  const cleanedValue = input.value.trim().replace(/\s+/g, ' ');
  display.textContent = cleanedValue;
  // 要是想同时把处理后的值写回输入框，加上下面这行就行
  // input.value = cleanedValue;
});
</script>

小补充 #

trim()方法会去除字符串首尾的所有空白字符（包括空格、换行符\n、制表符\t等），如果只想精准去除首尾的空格，也可以用replace(/^ +| +$/g, '')，不过大多数场景下trim()已经完全够用啦。

内容的提问来源于stack exchange，提问作者Jesús Palmera