正则表达式应该捕获链接并转换为 HTML，但不是 HTML 链接

Question

我想做的是

当有这样的文字This is a link: https://website.com hahaha它应该把它变成

This is a link: <a href="https://website.com" target="_blank">https://website.com</a> hahaha

但是当我有

This is a link: <a href="https://website.com" target="_blank">https://website.com</a> hahaha 它不应该做任何事情。

目前我有这个功能

static linkify(inputText: string): string {
    // URLs starting with http://, https://, or ftp://
    const replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim
    let replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>')

    // URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    const replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>')

    // Change email addresses to mailto:: links.
    const replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>')

    return replacedText
}

当我输入 <a href="https://website.com" target="_blank">https://website.com</a> 它给了我 <a href="<a href="https://website.com" target="_blank">https://website.com</a>" target="_blank"><a href="https://website.com" target="_blank">https://website.com</a></a>

将所有https://website.com 替换为<a href="https://website.com" target="_blank">https://website.com</a>

我怎么能不让它取代那些？

谢谢

Answer 1

这里应该可以工作，提供了用于测试各种场景的示例文本：

function linkify(text) {
  // turn standalone www. into a URL:
  const wwwRegex = /(?<![\/'">])(www\.)/gm;
  // turn URL into link:
  const urlRegex = /(?<!['">])((https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
  // turn email into link:
  const emailRegex = /(?<!['">])(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gm;
  text = text
    .replace(wwwRegex, 'http:\/\/$1')
    .replace(urlRegex, '<a href="$1" target="_blank">$1</a>')
    .replace(emailRegex, '<a href="mailto:$1" target="_blank">$1</a>');
  return text;
}

const text = 'Sample text with https://google.com, and https://www.google.com/search?q=regex. Sometimes just www.google.com, and keep <a href="https://www.google.com" target="_blank">https://www.google.com</a> as is. Email jimmy.neutron@gmail.com should work as well. One more <a href="www.mylink.com">Link</a> test. No protocol link <a href="www.mylink.com" target="_blank">www.mylink.com</a>.';

var result = linkify(text);
console.log(result);

输出：（为清楚起见添加了换行符）

Sample text with <a href="https://google.com" target="_blank">https://google.com</a>, 
and <a href="https://www.google.com/search?q=regex" target="_blank">https://www.google.com/search?q=regex</a>. 
Sometimes just <a href="http://www.google.com" target="_blank">http://www.google.com</a>, 
and keep <a href="https://www.google.com" target="_blank">https://www.google.com</a> 
as is. Email 
<a href="mailto:jimmy.neutron@gmail.com" target="_blank">jimmy.neutron@gmail.com</a> 
should work as well.
One more <a href="http://www.mylink.com">Link</a> test.
No protocol link <a href="www.mylink.com" target="_blank">www.mylink.com</a>.

解释 wwwRegex:

• 将独立的www.转成网址，稍后链接：
• /(?<![\/'">])(www\.)/ - 对 / 进行否定的后视，然后是 www.（已捕获）
• 如果您的正则表达式引擎不支持负后向使用：
• /(^|[^\/'">])(www\.)/ - 捕获非/（如果有），引用为$1

解释urlRegex：

• 把网址转成链接：
• /(?<!['">])((https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ - 对 '、" 或 > 进行否定的查找，后跟 URL 模式（已捕获）

说明emailRegex：

• 将电子邮件转为链接：
• /(?<!['">])(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/ - 对 '、" 或 > 进行否定的查找，后跟电子邮件模式（已捕获）