JavaScript中忽略阿拉伯语变音符号实现文本高亮的方案

核心思路是让正则匹配时跳过变音符号，但替换时保留原文本的变音细节，具体实现如下：

实现步骤 #

• 转义动态搜索文本：由于searchText是动态变量，可能包含正则特殊字符（如.、*），需先转义避免正则语法错误。
• 构建兼容变音的匹配模式：针对搜索文本的每个字符，允许其后面跟随任意数量的阿拉伯语变音符号（基于你提供的清除变音正则反向匹配变音范围）。
• 执行匹配替换：用构建好的正则匹配原文本，替换时保留原匹配内容并包裹高亮标签。

完整代码实现 #

const searchText = 'والشم';
const resultText = 'اَلْيَوْمُ جَمِيلٌ وَالشَّمْسُ';

// 1. 转义搜索文本中的正则特殊字符
const escapedSearch = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

// 2. 构建允许字符后跟随变音符号的正则模式
// 每个搜索字符后匹配任意数量的阿拉伯语变音符号（即清除变音正则中排除的字符）
const pattern = escapedSearch.split('').map(char => 
  `${char}(?:[^\u0621-\u063A\u0641-\u064A\u0660-\u0669a-zA-Z 0-9])*`
).join('');

// 3. 创建正则并执行替换
const regex = new RegExp(pattern, 'gi');
const finalText = resultText.replace(regex, '<span class="highlighted">$&</span>');

console.log(finalText);
// 输出：اَلْيَوْمُ جَمِيلٌ <span class="highlighted">وَالشَّم</span>سُ

代码说明 #

• 转义处理：replace(/[.*+?^${}()|[\]\\]/g, '\\$&') 确保动态搜索文本中的特殊字符不会干扰正则语法。
• 变音匹配逻辑：(?:[^\u0621-\u063A\u0641-\u064A\u0660-\u0669a-zA-Z 0-9])* 匹配任意数量的阿拉伯语变音符号，实现忽略变音的精准匹配。
• 替换保留原内容：用$&引用原匹配结果，确保高亮部分保留原文本的变音符号。

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