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


Posted in Javascript onJanuary 20, 2014

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

检测

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

验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):

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

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

替换 3water.com
说到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;
    };
Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 #Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 #Javascript
文本框文本自动补全效果示例分享
Jan 19 #Javascript
不使用jquery实现js打字效果示例分享
Jan 19 #Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 #Javascript
js取float型小数点后两位数的方法
Jan 18 #Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 #Javascript
You might like
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
详谈js模块化规范
2017/07/07 Javascript
node.js基础知识小结
2018/02/26 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python学生信息管理系统修改版
2018/03/13 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Delphi软件工程师试题
2013/01/29 面试题
委托书怎么写
2014/07/31 职场文书
英文演讲稿开场白
2014/08/25 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
退学证明范本3篇
2014/10/29 职场文书
英文慰问信范文
2015/03/24 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server