假设我们有如下一段字符串,我们需要从中提取出链接并给它加上a标签并重新返回整段字符串。
var str="urlPahttp://www.baidu.comrser.hostname我www.baidu.com家www.baidu.com哈ftp://www.baidu.com大https://www.baidu.com家";
那么我们可以用以下实现思路
// 匹配链接的正则表达式
var urlReg= /(http:\/\/|ftp:\/\/|https:\/\/|www.)[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/g;
var array = url.match(urlReg);
// 设置!!为临时占位符
var rpStr = url.replace(urlReg,'!!')
function insertLink(el, i, arr) {
//匹配协议,因为Vuejs会对href属性自动加上' http:// '
if(el.match('http://') || el.match('ftp://') || el.match('https://')) {
// console.log('yes')
var link = ('<a href=\"'+el+'\">'+el+'</a>');
}else {
// console.log('false')
var link = ('<a href=\"http:\/\/'+el+'\">'+el+'</a>');
}
// console.log(rpStr)
// console.log(links)
// 将字符串里的!! 替换为link的内容并重新赋值给 rpStr
rpStr = rpStr.replace('!!',link)
// console.log('result',rpStr)
return rpStr
}
array.forEach(insertLink);
console.log(rpStr)