javascript - 用 替换空格会导致 â 字符不可见

Question

我正在使用如下选项列表填充选择框:

optionsString = optionsString.replace(/\s/g, ' ');

我这样做是为了保留单词之间的空格。如果我有这样的单词，我不希望 DOM 删除额外的空格:

<option>a b    c</option>

如果我控制台记录我得到的选择框的值:

a b c 而不是 a b c 这正是我想要的。但是，在 b 之后添加了一个隐藏字符 â。

当我将字符串发送到后端数据库时，数据库找不到任何属于 a b c 的记录。当我将字符串转换为十六进制时，我看到了不可见的字符。有没有办法在不添加这个特殊字符的情况下不删除空格？

Answer 1

请注意，  创建一个不间断空格，而不仅仅是一个空格。如果您使用该选项的值，它将包含不间断空格，而不仅仅是空格。如果您希望它们是空格，则必须将它们替换为空格:

const value = theSelectBoxOrOptionElement.value.replace(/\u00A0/g, " ");

(\u00A0 是   创建的不间断空格字符。)

但请注意， \s 将匹配任何空格，而不仅仅是空格，因此您的 replace 是一个有损操作(所有类型的空格都会替换为  ，所以当我们想返回时我们无法知道哪个是哪个)。

这是一个例子:

let optionsString = `a b    c`;
optionsString = optionsString.replace(/\s/g, " ");

document.body.insertAdjacentHTML(
    `beforeend`,
    `<select id="the-select">
        <option>${optionsString}</option>
    </select>`
);

const select = document.getElementById(`the-select`);
const rawValue = select.value;
console.log(`rawValue:`, codePoints(rawValue));
const updated = rawValue.replace(/\u00A0/g, " ");
console.log(`updated:`, codePoints(updated));

function codePoints(value) {
    return [...value].map(v => v.codePointAt(0).toString(16).padStart(2, "0")).join(" ");
}