如何用JS正确替换含5位及以上Unicode码点的非ASCII字符？

问题场景 #

需要编写JavaScript脚本，将字符串中的非ASCII字符替换为对应的Unicode码点格式（例如Lorem ipsum á dolor sit amet转为Lorem ipsum [00E1] sit amet）。但遇到5位及以上Unicode码点的字符（如𝔸，对应U+1D538）时，会被识别为两个独立的代理对字符，导致替换结果不符合预期；同时尝试匹配1-2个非ASCII字符时，又会出现普通非ASCII字符互相融合的问题。

解决方案 #

使用优先匹配代理对的正则表达式，结合String.prototype.replace()即可实现需求，无需for循环。核心是让正则先匹配完整的代理对，再匹配单个非ASCII字符，避免融合问题。

最终代码 #

function findNonAsciiCodes(string) {
  // 先匹配代理对（高代理+低代理），再匹配单个非ASCII字符
  return string.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[^ -~]/g, char => {
    const codePoint = char.codePointAt(0);
    // 格式化为大写，不足4位补0，5位码点自然保留长度
    const hex = codePoint.toString(16).toUpperCase().padStart(4, '0');
    return `[${hex}]`;
  });
}

// 测试用例验证
console.log(findNonAsciiCodes("Lorem ipsum á dolor sit amet"));
// 输出：Lorem ipsum [00E1] dolor sit amet

console.log(findNonAsciiCodes("Lorem ipsum 𝔸 dolor sit amet"));
// 输出：Lorem ipsum [1D538] dolor sit amet

console.log(findNonAsciiCodes("Lorem ipsum áá dolor sit amet"));
// 输出：Lorem ipsum [00E1][00E1] dolor sit amet

console.log(findNonAsciiCodes("Lorem ipsum á𝔸 dolor sit amet"));
// 输出：Lorem ipsum [00E1][1D538] dolor sit amet

console.log(findNonAsciiCodes("Lorem ipsum 𝔸á dolor sit amet"));
// 输出：Lorem ipsum [1D538][00E1] dolor sit amet

正则说明 #

• [\uD800-\uDBFF][\uDC00-\uDFFF]：匹配完整的Unicode代理对，其中\uD800-\uDBFF是高代理字符范围，\uDC00-\uDFFF是低代理字符范围，两者组合表示一个5位及以上的Unicode码点。
• |[^ -~]：正则分支结构，当不匹配代理对时，匹配单个非ASCII字符（[^ -~]表示不在ASCII可打印字符范围内的字符）。
• 正则匹配优先级从左到右，因此会优先捕获完整代理对，避免将单个非ASCII字符误判为代理对的一部分。

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