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

背景:写一个简单的聊天系统,发出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);

时间: 2024-12-21 04:52:54

JavaScript实现url地址自动检测并添加URL链接示例代码_javascript技巧的相关文章

给ListBox添加双击事件示例代码_javascript技巧

复制代码 代码如下: <!--创建一个JS调用button的click事件--> <script type="text/javascript"> function JsListChangeItem() { document.getElementById("buttonShow").click(); } </script> <!--创建一个隐藏的button,创建双击事件---> <asp:Button ID=&q

手机端网页点击链接触发自动拨打或保存电话的示例代码_javascript技巧

通过网页拨打电话 <a href="tel://110 ">拨打电话</a> 这种方式塞班.安卓与iphone都支持 切记一定这这么写,不要自己写方法再去调用 例如;<a href="javascript:phone('+phone+') ">拨打电话</a> function phone(date){ window.location.href = 'tel://' + date; } 这样写IOS不兼容 以上是小编为

Javascript中查找不以XX字符结尾的单词示例代码_javascript技巧

首先,让我声明一下,我在写这篇文章之前花了2个多小时在弄正则表达式.悲~悲~悲~ 按照一般的思路,先来看看其他几个插找方式: 我以字符串 复制代码 代码如下: var str = "eattd gebcat gedat jadu geat beu"; 為例子. 1.以"ge"為开头的,结果应该是"gebcat, gedat, geat".因為单词以"ge"开头,则我可以放入一个新的数组供以后使用. 复制代码 代码如下: var

javascript客户端遍历控件与获取父容器对象示例代码_javascript技巧

1,遍历也面中所有的控件function findControlAll()    {        var inputs=document.getElementsByTagName("input");        for(j=0;j<inputs.length;j++)           if(inputs[j].type=="text") //这儿将页面所有类型为text的控件找出来,也可以设置成你想遍历的控件类型       {            

javascript获取URL参数与参数值的示例代码_javascript技巧

复制代码 代码如下: <script>                  function goto_url(url){                      var new_url = "http://shop.usteel.com/index.php?app=list_release";                      var d_date  = getParameter("date",url);                    

仿163填写邮件地址自动显示下拉(无优化)_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

JavaScript实现向OL列表内动态添加LI元素的方法_javascript技巧

本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my

原生js实现class的添加和删除简单代码_javascript技巧

实例代码: function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += " "

表单提交时自动复制内容到剪贴板的js代码_javascript技巧

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe