React/NextJS中乌尔都语匹配文本变色失效问题求助

问题根源在于正则表达式里的\b元字符——它仅针对拉丁字母（A-Z、a-z）识别单词边界，乌尔都语这类非拉丁文字的字符无法被\b判定为单词边界，导致匹配逻辑失效。

修复方案 #

1. 替换\b为乌尔都语专属的边界断言：利用Unicode字符范围（U+0600到U+06FF覆盖乌尔都语字符），通过环视断言精准匹配单词边界：
   • (?<![\u0600-\u06FF])：断言当前位置前不是乌尔都语字符
   • (?![\u0600-\u06FF])：断言当前位置后不是乌尔都语字符
2. 添加正则特殊字符转义逻辑，避免高亮词含特殊字符时触发语法错误。

修改后的完整代码 #

import React from "react";

const App = () => {
  const content = "علی اور بوب چارلی سے ملاقات کے لئے گئے۔ بعد میں، علی نے بوب اور چارلی کو مدعو کیا۔";

  const urduWordsToHighlight = ["علی", "بوب", "چارلی"];

  // 转义正则特殊字符，避免语法错误
  const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

  const highlightUrduWords = (text, highlightWordsArray) => {
    // 用乌尔都语字符集的环视断言替代\b
    const escapedWords = highlightWordsArray.map(escapeRegExp).join("|");
    const regex = new RegExp(`(?<!\\u0600-\\u06FF])(${escapedWords})(?!\\u0600-\\u06FF])`, "g");
    const parts = text.split(regex);

    return parts.map((part, index) => {
      if (highlightWordsArray.includes(part)) {
        return (
          <span key={index} style={{ color: "blue", fontWeight: "bold" }}>
            {part}
          </span>
        );
      }
      return part;
    });
  };

  return (
    <div>
      <h1> ہائی لائٹ </h1>
      <p style={{ fontFamily: "Noto Nastaliq Urdu, Arial, sans-serif" }}>
        {highlightUrduWords(content, urduWordsToHighlight)}
      </p>
    </div>
  );
};

export default App;

核心说明 #

• escapeRegExp函数：处理高亮词中的正则特殊字符（如$、*等），防止正则表达式解析报错
• 环视断言：确保匹配的是独立的乌尔都语单词，不会误匹配单词内部的子串

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