js识别字符串中的链接并使之可跳转

最近项目遇到一个功能,对话框中的内容可能会包含链接,需要识别并可直接点击,对方的对话框内容是后台返回的数据。
第一次脑中的想法是找到内容中的链接摘出来...,有点想偏了,因为看到返回的内容中的链接是有<a>标签,所以只需要利用框架中可以直接识别html标签的服务或指令就可以。vue项目中直接使用v-html就可以解析

//js
let http = "dfa<a href='http://wwww.baidu.com'>你好啊</a><h1 style='color:red'>这是一个h1元素内容</h1>fgdfg";
//html
<p v-html="http"></p>

在angular项目中没有类似v-html的指令,需要借助$sce服务的trustAsHtml(),

//js
var httptext = "链接,<a href='http://wwww.baidu.com'>你好</a>,可点击跳转到<a href='https://www.cnblogs.com/yzhihao/p/11510128.html'>haha</a>";
$scope.http = $sce.trustAsHtml(httptext );
//html
<p v-bind-html="http"></p>

sce服务:因为如果在angularjs中绑定的数据有html标签时,如上面的<h1>,会被angularjs认为是不安全的而自动过滤掉,为了保留这些标签就需要开启非安全模式,这是非常危险的。sce是angularJS自带的安全处理模块,因此需要$sce.trustAsHtml()方法将数据内容以html的形式解析并返回。

ng-bind-html指令是通过一个安全的方式将内容绑定到HTML元素上,该属性依赖于$sanitize,需要在项目中引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize。

延伸

如果后台返回的数据的链接不是a标签,只是普通的www.cnblogs.com这种的字符串,我们的处理方式,需要利用正则先对它处理,给他加上a标签。

var httptext = "dfadfafa自动转换为链接http://wwww.baidu.com,可点击跳转fadfadff到https://www.cnblogs.com/yzhihao/p/11510128.html";
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
var urlText = httptext.replace(reg,"<a href='$1$2'>$1$2</a>");
$scope.http = $sce.trustAsHtml(urlText);
//html
<p v-bind-html="http"></p>

image.png

end!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容