HTML链接正则匹配问题：列表元素内无<br/>链接无法识别

问题原因分析 #

你的正则里的负向预查部分(?![^<]*>|[^<>]*<\/)，第二个条件[^<>]*<\/是“罪魁祸首”：
当链接直接跟在闭合标签（比如</li>）前面时，[^<>]*会匹配链接到</之间的所有非<>字符（比如空格），然后触发</的匹配，负向预查生效，导致整个链接匹配失败。
而第二个例子里，链接后面是<br/>——这个标签里没有</（是<br/后接>），所以第二个条件不满足，负向预查不触发，链接就能被正常识别。

修正后的正则与代码 #

我们只需要去掉那个误判的第二个条件，保留用来排除HTML标签内部链接的核心逻辑即可：

// 修正后的正则表达式
const urlPattern = /\b(?![^<]*>)(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

// 替换逻辑保持不变
function linkify(textInput) {
  return textInput.replace(urlPattern, '<a target="_blank" rel="noopener" href="$&">$&</a>');
}

验证效果 #

• 对于<ul><li>Link: https://www.link.com</li></ul>：链接后面的</li>不再触发负向预查，会被正常转换为可点击链接。
• 对于<ul><li>Link: https://www.link.com <br/></li></ul>：依然能正常识别链接，不受影响。
• 同时，HTML标签内部的链接（比如<a href="https://example.com">里的地址）依然会被正确排除，不会被重复转换。

补充说明 #

修正后的负向预查(?![^<]*>)的作用是：确保当前匹配的链接不在HTML标签的属性内部（比如<img src="https://xxx">这种场景）——如果链接后面在遇到下一个<之前就出现了>，说明它在标签内部，直接排除匹配，这个逻辑是完全可靠的。

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