如何在Algolia Places中移除字符串内的重音/变音符号

Algolia Places 没有提供内置的重音替换配置项，你可以结合原生字符串处理方法，监听组件事件实现需求： #

第一步：实现重音移除工具函数 #

通过Unicode规范化方法拆分带变音符号的字符，再过滤掉变音符号区间的字符即可覆盖绝大多数场景的重音、变音符号清理需求：

function removeAccents(str) {
  // NFD模式将带重音的字符拆分为基础字符+组合变音标记
  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}

第二步：绑定到Algolia Places组件事件 #

你可以根据需求选择在用户输入、地址选中两个节点处理内容，修改后的初始化代码如下：

const location = places({
  ...this.appKeyId,
  container: document.querySelector('#location') as HTMLInputElement,
});

// 监听实时输入事件，处理用户输入的内容
location.on('input', (e) => {
  e.target.value = removeAccents(e.target.value);
});

// 监听地址选中事件，处理自动填充的地址内容
location.on('change', (e) => {
  const inputEl = document.querySelector('#location') as HTMLInputElement;
  // 可按需替换suggestion对象内的任意字段，这里直接替换填充到输入框的完整地址
  inputEl.value = removeAccents(e.suggestion.value);
});

补充说明 #

• 如果不需要实时处理，仅需要在提交表单时清洗数据，直接在表单提交回调中调用removeAccents处理输入框的值即可。
• 上述方法支持处理常见的拉丁系语言变音符号，包括法语、西班牙语、德语等语种的é、à、ñ、ü等字符。

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