我使用以下标记将提及内容插入到文本区域中: @User Name Can Have Spaces(userId: number) 例如@Javier Hernadez(5)
我有一个 JSON 用户列表: var users = [{name: 'Javier Hernandez',id: 5},{...}];
现在我想将标记转换为纯 HTML 代码:
var myHtml = "..."; // loaded externally and contains the markup
var matches = myHtml.match(/@([a-z\d_]+)/ig);
但这不适用于带空格的用户名，而且我无法获取用户 ID。
我现在将迭代匹配项，检查标记中的用户是否存在于我的 users 中数组并替换模板字符串中的匹配
<a href="path/to/user/{id}>{name}</a>
我该如何正确地做到这一点？
请您参考如下方法:
首先，分析您当前的正则表达式以及它不起作用的原因:
@是文字@字符，这里没什么可看的[...]是一个字符类。它将匹配它包含的任何(一个)字符[a-z\d_]是由每个小写字母、每个数字(由其自己的字符类\d表示)和下划线组成的字符类+是一个量词，表示它所修饰的 token 必须至少匹配一次，并且可以匹配多次。这里它适用于之前的字符类/pattern/flags是 Javascript 的正则表达式语法之一i是不区分大小写的标志。在这种情况下，这意味着字符类也将匹配大写字母，尽管它只包含小写字母g是全局标志。这意味着正则表达式将尝试匹配多个结果，而不是在第一次遇到时返回。
因此，您尝试匹配 @User Name Can Have Spaces(userId: number)，但您的正则表达式不匹配您提到的空格，也不匹配括号。
您可以将这三个字符添加到字符类中，如下所示:
/@([a-z\d_ ()]+)/gi
但是，至少在我看来，对您想要匹配的内容的更好翻译如下:
/@[a-z\d_ ]+\(\d+\)/gi
我们匹配的用户名可以包含字母、数字、下划线和空格，后跟左括号、数字和右括号。括号必须被转义，以便它们被理解为文字字符而不是正则表达式组。
如果您想轻松地分别提取用户名和用户 ID，您可能需要使用以下命令，将它们分别分组到各自的组中:
/@([a-z\d_ ]+)\((\d+)\)/gi
这是一个regex101 link进行测试。
