脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 自动给文本url地址增加链接

javascript自动给文本url地址增加链接的方法分享

 更新时间：2014年01月20日 16:03:30   作者：  
这篇文章主要介绍了javascript自动给文本url地址增加链接的方法，有需要的朋友可以参考一下

URL地址自动添加的实现其实就是那么点内容：检测与替换。

检测

“检测”就是检测文字（字符串）内部是否有符合http地址的内容，显然，这需要用到正则表达式进行验证，这个工作前端和后台都可以做，这里，只讲前端的方法，使用JavaScript实现。

验证HTTP地址的正则表达式如下（可能有疏漏或是不准确之处，欢迎指正）：

复制代码 代码如下:

var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g;

前一部分匹配http或是https开头的URL字符串地址，后面一部分匹配一些字符，英文字符、下划线(_)、点号(.)、问号(?)以及等号(=)，连接短线(-)等。

替换 www.jb51.net
说到JavaScript中的替换功能，首先想到的自然是replace属性了，replace属性强大之处在于其支持正则表达式，可以对符合正则的字符串进行替换。例如，我们要替换掉字符串两端的空格就可以使用类似下面的语句：

复制代码 代码如下:

var s = " blank ";
s = s.replace(/^s+(.*?)s+$/, "");
alert(s);

就会得到”blank”，两端的空格被剔除了。同样的，这里只要将匹配的http地址替换成<a>标签嵌套的含有href属性的http地址就可以了

例,这个表达式可以匹配 http,https,ftp,ftps以及IP地址的URL地址。

复制代码 代码如下:

var URL = /(https?://|ftps?://)?((d{1,3}.d{1,3}.d{1,3}.d{1,3})(:[0-9]+)?|([w]+.)(S+)(w{2,4})(:[0-9]+)?)(/?([w#!:.?+=&%@!-/]+))?/ig;

还算是URL地址匹配计较完善的。利用这个表达式我写了两个小函数，将用户留言的URL地址替换成可点击的链接，没有什么太难的，就是利用JavaScript 的 replace() 函数来实现替换 URL 为 link：

复制代码 代码如下:

/**
 * JavaScrit 版本
 * 将URL地址转化为完整的A标签链接代码
 */

var replaceURLToLink = function (text) {
        text = text.replace(URL, function (url) {
            var urlText = url;
            if (!url.match('^https?://')) {
                url = 'http://' + url;
            }
            return '' + urlText + '';
        });

        return text;
    };

您可能感兴趣的文章:

相关文章

  • 微信小程序canvas开发水果老虎机的思路详解

    微信小程序canvas开发水果老虎机的思路详解

    这篇文章主要介绍了微信小程序canvas开发水果老虎机的思路，本文通过思路代码分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • js加入收藏夹代码(兼容ie/ff/op)

    js加入收藏夹代码(兼容ie/ff/op)

    这篇文章主要介绍了js加入收藏夹代码并兼容ie/ff/op,需要的朋友可以参考下
    2014-05-05
  • 实例分析JS与Node.js中的事件循环

    实例分析JS与Node.js中的事件循环

    本篇文章通过实例给大家详细分析了JS与Node.js中的事件的原理以及用法，大家学习一下吧。
    2017-12-12
  • js防抖和节流的深入讲解

    js防抖和节流的深入讲解

    这篇文章主要给大家介绍了关于js防抖和节流的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • 完美的js图片轮换效果

    完美的js图片轮换效果

    这篇文章主要为大家详细介绍了完美的js图片轮换效果，包括左右移动和缓动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js fill函数填充数组或对象的解决方法

    js fill函数填充数组或对象的解决方法

    这篇文章主要介绍了js fill函数填充数组或对象的问题及解决方法，本文给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • iframe窗口高度自适应的又一个巧妙实现思路

    iframe窗口高度自适应的又一个巧妙实现思路

    这篇文章主要介绍了实现iframe窗口高度自适应的又一个巧妙思路,需要的朋友可以参考下
    2014-04-04
  • 深入探究JavaScript中RunJs的特性及用途

    深入探究JavaScript中RunJs的特性及用途

    JavaScript已经成为现代Web开发的中流砥柱,实时调试、快速原型设计以及代码的即时反馈通常需要开发者使用多个工具和手段,现代工具的涌现为我们带来了更好的解决方案,而RunJs就是其中之一,本文将带您深入探讨RunJs的特性、用途,需要的朋友可以参考下
    2023-08-08
  • JS面向对象编程详解

    JS面向对象编程详解

    这篇文章主要为大家详细介绍了JS面向对象编程，帮助大家更详细的对JS面向对象进行学习，感兴趣的朋友可以参考一下
    2016-03-03
  • JS+CSS实现仿雅虎另类滑动门切换效果

    JS+CSS实现仿雅虎另类滑动门切换效果

    这篇文章主要介绍了JS+CSS实现仿雅虎另类滑动门切换效果,涉及JavaScript响应鼠标事件及针对页面元素的嵌套循环遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10

最新评论