Angular去除字符串重音/变音符号时IE11兼容报错问题

报错根因 #

String.prototype.normalize是ES2015(ES6)新增的字符串方法，IE11完全没有实现该API，因此调用时会抛出“对象不支持normalize属性或方法”的错误。

方案1：引入polyfill（改动最小，推荐） #

Angular项目直接在polyfills.ts文件中引入normalize的polyfill即可，无需修改原有业务代码：

// 加到polyfills.ts文件末尾即可，core-js是Angular默认内置的依赖，无需额外安装
import 'core-js/es/string/normalize';

引入后原有逻辑str.normalize("NFD").replace(/[\u0300-\u036f]/g, "")可直接在IE11正常运行。

注意：请确保项目tsconfig.json中的compilerOptions.target配置为es5，同时polyfills.ts中IE11相关的基础polyfill已取消注释启用。

方案2：手动实现重音替换逻辑（无需polyfill，适合包体积敏感场景） #

如果不想额外引入polyfill，可以手动维护带重音字符的映射表，直接做字符替换，不需要调用normalize方法：

function removeAccents(str: string): string {
  const accentMap = {
    'á':'a', 'à':'a', 'â':'a', 'ä':'a', 'ã':'a', 'å':'a', 'ă':'a', 'ą':'a',
    'é':'e', 'è':'e', 'ê':'e', 'ë':'e', 'ę':'e', 'ě':'e',
    'í':'i', 'ì':'i', 'î':'i', 'ï':'i', 'į':'i',
    'ó':'o', 'ò':'o', 'ô':'o', 'ö':'o', 'õ':'o', 'ø':'o', 'ő':'o',
    'ú':'u', 'ù':'u', 'û':'u', 'ü':'u', 'ũ':'u', 'ů':'u', 'ű':'u',
    'ý':'y', 'ÿ':'y',
    'ç':'c', 'ć':'c', 'č':'c', 'ĉ':'c',
    'ď':'d', 'đ':'d',
    'ĝ':'g', 'ğ':'g',
    'ĥ':'h',
    'ĵ':'j',
    'ł':'l', 'ĺ':'l', 'ľ':'l',
    'ń':'n', 'ň':'n', 'ñ':'n',
    'ŕ':'r', 'ř':'r',
    'ś':'s', 'š':'s', 'ŝ':'s',
    'ť':'t', 'ţ':'t',
    'ź':'z', 'ž':'z', 'ż':'z',
    'Á':'A', 'À':'A', 'Â':'A', 'Ä':'A', 'Ã':'A', 'Å':'A', 'Ă':'A', 'Ą':'A',
    'É':'E', 'È':'E', 'Ê':'E', 'Ë':'E', 'Ę':'E', 'Ě':'E',
    'Í':'I', 'Ì':'I', 'Î':'I', 'Ï':'I', 'Į':'I',
    'Ó':'O', 'Ò':'O', 'Ô':'O', 'Ö':'O', 'Õ':'O', 'Ø':'O', 'Ő':'O',
    'Ú':'U', 'Ù':'U', 'Û':'U', 'Ü':'U', 'Ũ':'U', 'Ů':'U', 'Ű':'U',
    'Ý':'Y',
    'Ç':'C', 'Ć':'C', 'Č':'C', 'Ĉ':'C',
    'Ď':'D', 'Đ':'D',
    'Ĝ':'G', 'Ğ':'G',
    'Ĥ':'H',
    'Ĵ':'J',
    'Ł':'L', 'Ĺ':'L', 'Ľ':'L',
    'Ń':'N', 'Ň':'N', 'Ñ':'N',
    'Ŕ':'R', 'Ř':'R',
    'Ś':'S', 'Š':'S', 'Ŝ':'S',
    'Ť':'T', 'Ţ':'T',
    'Ź':'Z', 'Ž':'Z', 'Ż':'Z'
  };
  return str.replace(/[^\u0000-\u007E]/g, char => accentMap[char] || char);
}

直接调用该函数即可实现去除重音的效果，兼容所有低版本浏览器。

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