使用jQuery格式化用户输入URL自动链接及动态创建锚点元素方法

嘿，这俩问题本质上是相通的——核心都是把文本里的URL识别出来，转成可点击的锚点链接。我来一步步给你拆解怎么做：

一、处理用户输入内容的自动URL链接 #

不管用户是在textarea还是input框里输入内容，我们可以通过监听输入事件实时转换，或者在提交表单时统一处理。

步骤1：搞一个靠谱的URL匹配正则 #

先写个能覆盖大部分常见URL的正则，支持http/https开头，也兼容www开头的地址：

const urlRegex = /(\b(https?:\/\/|www\.)[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

步骤2：监听输入事件做实时处理 #

比如针对一个textarea，我们监听keyup事件，把输入的URL转成链接后放到预览区：

<textarea id="userInput" rows="4" cols="50"></textarea>
<div id="preview"></div>

$('#userInput').on('keyup', function() {
  const originalText = $(this).val();
  // 把匹配到的URL替换成带跳转的<a>标签
  const linkedText = originalText.replace(urlRegex, '<a href="$1" target="_blank">$1</a>');
  // 更新预览区内容
  $('#preview').html(linkedText);
});

如果是提交表单时统一处理，就在表单的submit事件里执行同样的替换逻辑就行。

二、把现有文本中的URL动态转成锚点 #

就像你举的例子，把<p>go to http://google.com</p>转成带链接的内容，用同样的正则替换逻辑就能搞定：

示例代码 #

假设页面上有这样的文本元素：

<p class="text-with-url">go to http://google.com, also check www.github.com</p>

用jQuery遍历处理：

$('.text-with-url').each(function() {
  const originalHtml = $(this).html();
  const urlRegex = /(\b(https?:\/\/|www\.)[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  // 按照你的需求，把链接文本改成"link"
  const newHtml = originalHtml.replace(urlRegex, '<a href="$1" target="_blank">link</a>');
  $(this).html(newHtml);
});

处理后，原来的p标签就会变成：

<p class="text-with-url">go to <a href="http://google.com" target="_blank">link</a>, also check <a href="www.github.com" target="_blank">link</a></p>

小提醒 #

• 正则可以按需调整，比如要匹配mailto、ftp链接的话，直接在正则里加对应的前缀就行。
• target="_blank"是让链接在新窗口打开，不需要的话可以删掉。
• 如果文本里已经有现成的<a>标签，正则可能会重复匹配，这时候可以调整规则避免匹配标签内的内容，或者先过滤掉已有的链接元素。

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