jQuery自动给网站文章中文本URL添加超链接

作为一个资深的 SEOER 以及用户体验的极致追求者，总是会在实际的操作和使用中找到可以提升或者是简化的地方，昨天在分享《WordPress 自动将当前文章标签添加为关键词内链》文章重新定义文章内链的时候就在思考，内链可以做到自动添加，那么外链呢？

很多时候或者大多数人并不原因在文章中添加外链，所有很多时候即使是需要分享其它的网站也只会用文本链接，简而言之就是看上去是个链接，但是实际上并不能直接点击，需要复制到浏览器地址栏去访问，原因就是懂点网站优化的朋友就知道是为了防止导出权重，所有这一点子凡可以理解，并且自己很多时候在编辑文章的时候也不愿意给其它 URL 做超链接。

虽然从站长和编辑的角度来说我很理解，但作为用户来说，就非常的不方便了。而今天子凡就要来解决这个问题，既然是解决问题，那么就需要知其所以然。为了网站本身不导出外链，所有编辑使用文本 URL，这样搜索引擎抓取的时候这个文本 URL 并不会被搜索引擎去访问，那么解决用户无法直接点击访问的办法就是利用 js 或者 jQuery 的方式自动给这些文本 URL 添加上超链接，因为搜索引擎本身不会去执行 js，所有只有当用户访问时用 js 渲染功能，这样搜索引擎获取的文章内容就是没有超链接的文本 URL，而用户访问时则是可以点击的超链接 URL。

1
2
3
4
5
6
7
8
9
10
11
12
13

//jQuery 自动给文本 URL 添加可点击超链接链接
var urlRegex = /(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%]*)*/g; //适配多样化的 URL 正则表达式
$(".your-class-name *").not("a").addBack().contents().each(function() { //.your-class-name 为文章包裹的元素名称
	if(this.nodeType === 3 && this.textContent.trim().length > 0) { //非空文本节点
		if ($(this).parents('a').length == 0) {//检查当前文本节点是否在链接元素内部
			var newText = this.textContent.replace(urlRegex, function(match) {
				var url = match.startsWith('http') ? match : 'http://' + match; //判断 URL 是否包含 http 协议前缀
				return '<a href="' + url + '" target="_blank" rel="nofollow noopener">' + match + '</a>'; //将文本 URL 转换为超链接
			});
			$(this).replaceWith(newText);
		}
	}
});

这段代码的核心是一个正则表达式 urlRegex 和一个 jQuery 语句，它们分别用于匹配 URL 和遍历 DOM 元素。

正则表达式“/(https?://)?([da-z.-]+).([a-z.]{2,6})([/?w.-=#%]*)*/g”用于匹配文本中的多样化 URL，子凡我可是测试了很多不用样式的 URL，确保能够竟可能的适配更多的 URL。这个表达式可以匹配以 http:// 或 https:// 开头的 URL，也可以匹配没有这些前缀的 URL。对于没有 http:// 或 https:// 前缀的 URL，我们将自动添加 http:// 前缀。

接下来，我们使用 jQuery 的 $(“.your-class-name *”).not(“a”).addBack().contents().each() 语句来遍历指定类名 “your-class-name” 下的所有子节点。我们检查每个节点是否是文本节点，即 nodeType === 3，并且排除了空的文本节点，.not(“a”)也排除了子节点已经是超链接的内容。如果满足这些条件，我们就用 replace 方法替换文本中的 URL，并用 replaceWith 方法更新原始的文本节点。

在 replace 方法中，我们为匹配的 URL 生成一个新的超链接标签。如果 URL 没有 http:// 或 https:// 前缀，我们会自动添加 http:// 前缀。生成的超链接标签使用 target=”_blank” 属性，以便在新的浏览器标签页中打开链接，当然为了更好的保证即使是搜索引擎渲染了页面，也能够自动的禁止搜索引擎爬取，所有子凡也给链接的 rel 属性设置了 nofollow。

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/jquery-add-text-url-link.html