[源码-JavaScript] html页面中网址链接，使用js自动识别并替换成可点击访问的链接

Data96

已于 2023-11-03 17:27:30 修改

阅读量389

点赞数 1

分类专栏：前后端编程文章标签： javascript html 前端

于 2023-11-03 17:25:07 首次发布

本文链接：https://blog.csdn.net/namepan1985/article/details/134207608

版权

前后端编程专栏收录该内容

85 篇文章

订阅专栏

效果：

源码：（需要提前引入jQuery，将源码插入html源码的<body>中）

<script>
//函数：将链接替换成可点击的链接
function autoChangeUrl(text) {
    if (!text) {
        return "";
    }
    // 使用正则表达式匹配HTTP地址
    var urlPattern = /(https?:\/\/[^\s]+)/g;
    
    //将链接替换成可点击的链接
    return text.replace(urlPattern, function(url) {
        // 将地址包裹在 <a> 标签中
        return '<a target="_blank" href="' + url + '">' + url + '</a>';
    });
    
}
</script>

<div id='content'>链接：https://a.data96.com/ 可以访问</div>
<div id='contentOutput'></div>

<script>
    var testurl = $('#content').text();
    console.log(testurl);
    $('#contentOutput').html(autoChangeUrl(testurl));
</script>