JavaScript中Unicode解码在文本框监听事件中失效问题排查

Unicode解码函数在alert弹窗中可正常工作，但绑定到textarea的change、keyup、paste事件时无法按预期运行，需排查原因。

代码示例 #

HTML代码 #

<textarea name="" id="first" cols="75" rows="15"></textarea>
<textarea name="" id="result" cols="75" rows="15"></textarea>

JavaScript代码 #

const jsEscape = (str) => {
  return str.replace(new RegExp("'", 'g'),"\'");
}
const decodeUnicodeEntities = (data) => {
  return unescape(jsEscape(data));
}
alert(decodeUnicodeEntities('http://x.com&shop_id=123'), 'check')
$('#first').on('change keyup paste', function() {
  $('#result').val(decodeUnicodeEntities($(this).val()));
});

问题原因 #

1. API兼容性与适用场景限制：unescape是已废弃的JavaScript API，当前解码逻辑仅对JavaScript字符串字面量中的Unicode转义序列（比如代码里写死的\uXXXX形式）有效。
2. 输入内容的形式差异：用户在textarea中输入或粘贴的是原始文本，并非经过JavaScript解析的字符串字面量，因此unescape无法识别其中的Unicode实体完成解码。

解决方法 #

替换原有的解码函数，采用更可靠的解码方式：

方法一：利用DOM解析 #

借助textarea的innerHTML特性自动解码Unicode实体：

const decodeUnicodeEntities = (str) => {
  const textArea = document.createElement('textarea');
  textArea.innerHTML = str;
  return textArea.value;
}

方法二：正则匹配解码 #

直接匹配字符串中的Unicode转义序列并转换为对应字符：

const decodeUnicodeEntities = (str) => {
  return str.replace(/\\u([0-9a-fA-F]{4})/g, (match, hex) => {
    return String.fromCharCode(parseInt(hex, 16));
  });
}

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