JavaScript实现url地址自动检测并添加URL链接示例代码


Posted in Javascript onNovember 12, 2013

背景:写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签。
实现代码:

String.prototype.httpHtml = function(){ 
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; 
return this.replace(reg, '<a target=_blank href="$1$2">$1$2</a>'); 
};

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

检测
“检测”就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现。
验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正):
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
前一部分匹配http或是https开头的URL字符串地址,后面一部分匹配一些字符,英文字符、下划线(_)、点号(.)、问号(?)以及等号(=),连接短线(-)等。

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

var s = " blank "; 
s = s.replace(/^\s+(.*?)\s+$/, ""); 
alert(s);
Javascript 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
js脚本实现数据去重
Nov 27 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
js实现微信聊天界面
Aug 09 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 #Javascript
屏蔽script注入小例子
Nov 12 #Javascript
js控制淡入淡出示例代码
Nov 12 #Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 #Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 #Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 #Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 #Javascript
You might like
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python定时关机小脚本
2018/06/20 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python使用递归的方式建立二叉树
2019/07/03 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
介绍一下gcc特性
2015/10/31 面试题
运动会广播稿60字
2014/01/15 职场文书
三年级数学教学反思
2014/01/31 职场文书
我的理想演讲稿
2014/04/30 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript