查找并替换富文本内容中的链接

最新推荐文章于 2024-06-28 17:22:24 发布

原创最新推荐文章于 2024-06-28 17:22:24 发布 · 576 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种在富文本中处理链接的方法，通过正则表达式匹配并转换文本中的URL为超链接形式，同时提供了针对不同浏览器特性的解决方案，如使用零宽断言排除特定属性内的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

replaceSrc(txt){
	var reg = /(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/ig;
	var result = txt.replace(reg,function(item){
	return "<a href='"+item+"' target='_blank'>"+item+"</a>";
	});
	return result;
}

若要排除富文本中src、href等属性下的链接，已知链接为href="www.baidu.com"
可使用零宽断言 (?<=A).*?(?=B) 即(?<!(src=|href=) 内容 (?!\s*\")
replaceSrc(txt){
	var reg = /(?<!(src=|href=)\"\s*)(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)(?!\s*\")/ig;
	var result = txt.replace(reg,function(item){
	return "<a href='"+item+"' target='_blank'>"+item+"</a>";
	});
	return result;
}

若是safari浏览器不支持零宽后发断言(?<!)(http)，支持先行断言(http)(?= 或 ?!)
可使用
var reg = (((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$(?!(\s*\"\s*(width=\"|target=\"|style=\"))|(<\/a>))