如何用JavaScript替换textarea内容？火狐/Chrome去空格功能异常排查

我写了一段用正则移除textarea所有空格的代码，但遇到了兼容问题：在Firefox和Chrome里，只有textarea初始内容是写在源码标签里的时候，这个功能能生效一次；之后手动输入内容再点按钮就没用了。但IE和Edge里是正常的，我平时用Firefox比较多，想知道问题出在哪。

我的代码如下：

<html>
<body>
<textarea id="contents" rows="5" cols="20"> This is a sentence. This is another sentence. Hello everyone. </textarea>
<p>Click button to remove spaces.</p>
<button type="button" onclick="removeSpaces()">Try it</button>
<script>
function removeSpaces() {
  var str = document.getElementById("contents").innerHTML;
  while (str.search(/\s/img) > -1) {
    var txt = str.replace(/\s/img, "");
    document.getElementById("contents").innerHTML = txt;
    str = document.getElementById("contents").innerHTML;
  }
}
</script>
</body>
</html>

嘿，这个问题我之前也踩过坑！核心问题就是你用了innerHTML来操作textarea的内容——这在现代浏览器里是个典型的误区。

为什么会失效？ #

在Chrome和Firefox这类遵循标准的浏览器中，textarea的innerHTML只会保存源码里写的初始内容，用户手动输入的新内容根本不会同步到innerHTML里。所以第一次点击按钮时，你修改的是初始内容，能生效；但之后手动输入的内容，innerHTML根本拿不到，自然就没效果了。而IE/Edge的处理比较“特殊”，会把用户输入同步到innerHTML，所以那边能正常运行。

怎么解决？ #

处理表单元素的内容，标准做法是用value属性！这才是专门用来获取和设置用户输入内容的属性，所有浏览器都支持。而且你的循环替换完全没必要，正则加个全局标志g就能一次性替换所有空白字符，效率更高。

修改后的函数长这样：

function removeSpaces() {
  const textarea = document.getElementById("contents");
  // 用value获取当前所有内容，一次性替换所有空白字符
  textarea.value = textarea.value.replace(/\s+/g, "");
}

完整的可运行代码 #

<html>
<body>
<textarea id="contents" rows="5" cols="20"> This is a sentence. This is another sentence. Hello everyone. </textarea>
<p>Click button to remove spaces.</p>
<button type="button" onclick="removeSpaces()">Try it</button>
<script>
function removeSpaces() {
  const textarea = document.getElementById("contents");
  textarea.value = textarea.value.replace(/\s+/g, "");
}
</script>
</body>
</html>

额外小提示 #

• 正则里的/img可以简化成/g：i是忽略大小写（替换空白字符不需要），m是多行模式（也没必要，\s本身就匹配所有空白），全局标志g就足够完成批量替换了。
• 以后操作input、textarea这类表单元素的内容，都优先用value，别再碰innerHTML啦，这是标准规范，能避免很多兼容问题。

内容的提问来源于stack exchange，提问作者pditf4me