HTML输入框粘贴十万条数字列表异常：出现未知空白字符

这问题我之前帮同事排查过类似的，大概率是浏览器对超大量文本输入的隐性处理搞的鬼，咱们一步步拆解问题和解决办法：

核心原因分析 #

你遇到的情况很典型：粘贴10万条数字列表后，输入框出现验证不通过的空白字符，但复制出来内容却正常。主要有两个关键点：

1. text类型输入框的局限性：<input type="text">本质是为短文本设计的，当内容长度突破一定阈值（比如几十万字符）时，部分浏览器会在渲染或内部处理时引入不可见的空白字符（比如零宽空格、软换行符），这些字符不会在复制时被带出，但会被val()读取到。
2. 浏览器的自动处理差异：少量数据时浏览器无需特殊优化，大文本则会触发一些隐性的编码/渲染调整，导致DOM值和视觉显示、复制内容不一致。

具体解决方案 #

1. 替换为textarea输入框 #

把原来的<input type="text">换成<textarea>，它专门针对大文本/多行内容设计，处理超长字符串更稳定，不会出现这类隐性空白问题：

<label for="array_input">Array:</label>
<textarea name="array_input" id="array_input" maxlength="1000000" rows="5"></textarea>

2. 读取值时添加清理逻辑 #

即使还有残留的异常字符，我们可以在读取输入值时主动过滤掉所有非数字、非逗号的内容，同时清理空项：

let arrayField = $('#array_input').val().replace(/[^\d,]/g, ''); // 过滤所有非数字、非逗号的字符
let inputArray = arrayField.split(',')
                     .filter(item => item.trim() !== '') // 移除分割后产生的空字符串
                     .map(a => parseInt(a));

// 可选：添加验证步骤，排查无效项
const invalidEntries = inputArray.filter(item => isNaN(item));
if (invalidEntries.length > 0) {
    console.warn('检测到无效数字项，数量：', invalidEntries.length);
} else {
    bubbleSort(inputArray);
}

3. 验证问题根源的小技巧 #

如果想确认是不是隐性字符在搞鬼，可以在读取arrayField后打印它的JSON格式：

console.log(JSON.stringify(arrayField));

这样所有不可见字符都会被转义显示，能直观看到是不是有\u200B（零宽空格）这类奇怪的字符。

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