JavaScript调用substring截断内容时异常多删除字符问题求助

问题根因 #

你遇到的截断异常核心原因是混用innerHTML和innerText计算截断长度，二者的计数逻辑完全不同：

• innerText返回的是元素渲染后的可见纯文本，会自动过滤HTML标签、合并空白符、转换HTML实体（比如 会被转换为1个普通空格）
• innerHTML返回的是元素内的原始HTML代码，包含所有标签、未转义的实体编码（比如空格用 表示的话，在innerHTML里长度是6，在innerText里仅算1个字符）

你之前写的退格函数能正常运行，只是因为输入框内没有HTML标签、也没有特殊实体编码，innerHTML和innerText的长度刚好一致，属于巧合没有触发问题。而计算展示区的内容包含运算符前后的空格、可能的格式标签等，二者长度不一致就会出现多删的问题。

修复方案 #

直接把出错的截断行修改为使用innerHTML本身的长度计算即可：

calc.innerHTML = calc.innerHTML.substring(0, calc.innerHTML.length - 1);

如果你的运算符前面固定带一个空格，需要同时删掉空格和旧运算符，只需要把截断长度调整为减2即可。

优化建议 #

• 尽量不要直接用DOM内容作为计算状态存储，建议单独定义变量存储表达式、运算符列表、输入值等数据，DOM只负责做状态展示，能避免大量DOM操作带来的异常
• 如果不需要处理富文本内容，优先用textContent或者innerText操作纯文本，比innerHTML更安全，也不会出现实体编码长度不匹配的问题

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