js替换链接

页面中存在id=jsContainer的DOM元素。
该DOM元素内会给出一段随机文本,可能包含一些链接,比如https://www.baidu.com,或者
www.baidu.com?from=onlineExam,如果出现链接文本,请给该链接文本加上链接标签,用户点击后能直接在新窗口中打开该链接。
请完成 link 函数,完成该功能 1、container只有纯文本内容,不包含其他dom元素
2、识别所有以http://、https://或者www.开始的链接 3、所有www.开头的链接,默认使用 http 协议
4、所有链接在新窗口打开

  • HTML
<div class="conter">
这里会给出一段随机文本,可能包含一些链接,比如https://www.baidu.com,或者 www.baidu.com?from=onlineExam,如果出现链接文本,请给该链接文本加上链接标签,用户点击后能直接在新窗口中打开该链接。
</div>
  • CSS
a {
    color: #00bc9b;
}
  • JS
function link() {
    const ele = document.querySelector('.conter')
    const text = ele.innerHTML
    const reg = /((http|https):\/\/)?www\.[\w\.]+\.[\w]+(\?[\S]+)?/g
    ele.innerHTML = text.replace(reg,function(m,p){
        let href = p ? m : 'http://' + m
        return '<a href="' + href + '" target="_blank">' + m + '</a>'
    })
}
function link() {
    document.querySelector('.conter')
        .innerHTML = 
            document.querySelector('.conter')
            .innerHTML
            .replace(/(https?:\/\/)?([a-z0-9]+\.)+[a-z0-9]+(([a-z0-9.?/=#]+))?/gi,function(s,s1,s2){
    console.log(s);
    var str = s.slice(0,4);
    console.log(str)
    if(str == 'http')
        return `<a target="_blank" href="${s}">${s}</a>`
    else if(str == 'www.')
        return `<a target="_blank" href="http://${s}">${s}</a>`
    else{
        var result = s.match(/www\..+/)
        if(result) return `${s.slice(0, result.index)}<a target="_blank" href="http://${result[0]}">${result[0]}</a>`
    }
    return s
})
}
function link() {
        var dom = document.getElementById('.conter')
        dom.innerHTML = dom.innerText.replace(/(http(s)?:\/\/|www\.)[\w\.\?\=\&#%]+/g, lj => {
            var bl = /^www/
            var c = ''
            bl.test(lj) ? c = 'http://' + lj : c = lj
            return `<a href="${c}" target="_blank">${lj}</a>`

        })
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值