如何修改正则表达式以区分链接和邮箱中的拉丁与俄文字母？

问题场景 #

现有代码需要匹配文本中的链接、邮箱并转换为可交互元素，但原正则仅支持拉丁字母，尝试替换字符集或添加u标志后未达预期甚至报错，需要适配俄文与拉丁字母混合的场景：

原代码：

let final = text;
const divElement = document.createElement('div');
// eslint-disable-next-line max-len
const linkRegExp = /\b(((http(s)?:\/\/)([\w-]{1,32}(\.|\:)[\w-]{1,32}))|([\w-]{1,32}(\@)[\w-]{1,32}(\.)[\w-]{1,32})|([\w-]{1,32}(\.)[A-Za-z]{1,32}))\b/gi;

function replacer(url) {
  if (url.match(/\S+@\S+\.\S+/ig)) {
    const email = document.createElement('a');
    email.innerHTML = url;
    email.href = `mailto:${url}`;
    email.setAttribute('class', 'email');

    return `${email.outerHTML}`;
  }
  const link = document.createElement('span');
  link.innerHTML = url;
  link.setAttribute('class', 'link');
  link.setAttribute('style', 'color: blue; cursor: pointer');

  return `${link.outerHTML}`;
}

final = final.replace(RegExp(linkRegExp), replacer);

问题根源 #

1. \b单词边界失效：\b是基于ASCII的单词边界，对俄文等非拉丁Unicode字符无法正确识别，导致匹配范围错误
2. 字符集与u标志冲突：使用[\p{L}\d_-]时必须配合u标志启用Unicode模式，但原正则结构或旧环境可能不兼容；直接添加[\wА-Яа-я-]未考虑俄文的ёЁ字符，且\b的问题未解决

解决方案 #

修改正则表达式，替换单词边界为自定义边界，适配Unicode字符集，同时优化分支结构：

方案1：支持现代环境（ES6+）

使用u标志和Unicode字符类\p{L}匹配所有语言字母：

let final = text;
const divElement = document.createElement('div');
// 拆分分支，使用自定义边界替代\b，支持Unicode字母（含俄文、拉丁）
const linkRegExp = /(?:^|\W)(?:(https?:\/\/[\p{L}\d_-]+(?:[:\.][\p{L}\d_-]+)+)|([\p{L}\d_-]+@[\p{L}\d_-]+\.[\p{L}\d_-]+)|([\p{L}\d_-]+\.[A-Za-z\p{L}]+))(?:$|\W)/gui;

function replacer(match, url, email, domain) {
  // 提取实际匹配内容（去掉前后的非单词字符）
  const content = url || email || domain;
  
  if (email) {
    const emailEl = document.createElement('a');
    emailEl.textContent = content;
    emailEl.href = `mailto:${content}`;
    emailEl.className = 'email';
    return match.replace(content, emailEl.outerHTML);
  }
  
  const linkEl = document.createElement('span');
  linkEl.textContent = content;
  linkEl.className = 'link';
  linkEl.style.cssText = 'color: blue; cursor: pointer';
  return match.replace(content, linkEl.outerHTML);
}

final = final.replace(linkRegExp, replacer);

方案2：兼容旧环境（不支持Unicode正则）

直接补充俄文字符集（含ёЁ），不使用u标志：

let final = text;
const divElement = document.createElement('div');
// 补充俄文全字符集，替换\b为自定义边界
const linkRegExp = /(?:^|\W)(?:(https?:\/\/[\wА-Яа-яёЁ_-]+(?:[:\.][\wА-Яа-яёЁ_-]+)+)|([\wА-Яа-яёЁ_-]+@[\wА-Яа-яёЁ_-]+\.[\wА-Яа-яёЁ_-]+)|([\wА-Яа-яёЁ_-]+\.[A-Za-zА-Яа-яёЁ]+))(?:$|\W)/gi;

function replacer(match, url, email, domain) {
  const content = url || email || domain;
  
  if (email) {
    const emailEl = document.createElement('a');
    emailEl.textContent = content;
    emailEl.href = `mailto:${content}`;
    emailEl.className = 'email';
    return match.replace(content, emailEl.outerHTML);
  }
  
  const linkEl = document.createElement('span');
  linkEl.textContent = content;
  linkEl.className = 'link';
  linkEl.style.cssText = 'color: blue; cursor: pointer';
  return match.replace(content, linkEl.outerHTML);
}

final = final.replace(linkRegExp, replacer);

修改说明 #

• 自定义边界：用(?:^|\W)和(?:$|\W)替代\b，确保俄文等非拉丁字符的边界识别正确
• 字符集优化：方案1用\p{L}匹配所有Unicode字母，方案2直接枚举俄文全字符（含ёЁ），覆盖拉丁+俄文场景
• 分支拆分：将http链接、邮箱、域名拆分为独立分支，更易维护和匹配准确
• replacer优化：直接从捕获组提取内容，避免二次匹配，提升效率

内容的提问来源于stack exchange，提问作者Ваш ГОСТ