HTML实体转Unicode异常：parseInt返回NaN、String.fromCodePoint越界求助

嘿，我来帮你解决这个HTML实体转Unicode的问题！你遇到的parseInt返回NaN和fromCodePoint超出范围的问题，其实都是因为处理十六进制码点的方式不对，咱们一步步来搞定它：

问题根源分析 #

1. parseInt返回NaN：直接处理这种字符串时，parseInt无法识别其中混杂的&#x和;符号；就算你提取出f101，如果不指定解析基数16，parseInt会默认按十进制解析，自然返回NaN。
2. fromCodePoint超出范围：Unicode的有效码点范围是0x0到0x10FFFF，如果解析出的数字超出这个区间，就会触发报错。

解决方案：分步处理 #

我们需要先提取HTML实体中的十六进制码，再正确转换为十进制码点，最后验证范围后生成Unicode字符。

1. 提取十六进制码

用正则表达式匹配&#x开头、;结尾的实体，捕获中间的十六进制字符串：

const entity = '';
const hexMatch = entity.match(/&#x([0-9a-fA-F]+);/);
// hexMatch[1] 就是我们要的十六进制串：'f101'

2. 正确转换为十进制码点

使用parseInt时必须指定基数16，确保按十六进制规则解析：

const codePoint = parseInt(hexMatch[1], 16);
// 这里 codePoint 会是 0xf101 的十进制值：61697

3. 验证码点范围并生成字符

检查码点是否在Unicode有效范围内，再用String.fromCodePoint生成对应字符：

if (codePoint >= 0 && codePoint <= 0x10FFFF) {
  const unicodeChar = String.fromCodePoint(codePoint);
  console.log(unicodeChar); // 输出对应的自定义字体字符
} else {
  console.error(`无效的Unicode码点：${codePoint}`);
}

批量处理数组的完整函数 #

如果要处理整个实体数组，可以封装成一个函数，自动跳过无效或超出范围的实体：

function convertEntitiesToUnicode(entityArray) {
  return entityArray.map(entity => {
    const match = entity.match(/&#x([0-9a-fA-F]+);/);
    if (!match) {
      console.warn(`跳过无效实体：${entity}`);
      return entity;
    }

    const codePoint = parseInt(match[1], 16);
    if (isNaN(codePoint)) {
      console.warn(`解析失败：${entity}`);
      return entity;
    }

    if (codePoint < 0 || codePoint > 0x10FFFF) {
      console.warn(`码点超出范围：${codePoint}（对应实体：${entity}）`);
      return entity;
    }

    return String.fromCodePoint(codePoint);
  });
}

// 用法示例
const customFontEntities = ['&#xf100;', '&#xf101;', '&#xf102;', '&#x110000;']; // 最后一个是超出范围的测试用例
const unicodeChars = convertEntitiesToUnicode(customFontEntities);
console.log(unicodeChars);

为什么之前只有成功？ #

大概率是你之前的代码误打误撞处理了它（比如刚好提取到了正确的十六进制串且指定了基数），但其他实体因为处理逻辑不严谨才出问题。用上面的方法就能统一处理所有有效实体啦！

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