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;
    };

赞 (0)

相关推荐

  • JavaScript获取网页中第一个链接ID的方法

    本文实例讲述了JavaScript获取网页中第一个链接ID的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <img src ="planets.gif" width="145" height="

  • JavaScript判断一个URL链接是否有效的实现方法

    引言 有一个通讯录系统, 同时部署在几台服务器上, 但是主页上有个通讯录的链接, 链接到这个系统. 问题是, 有时候链接指向的服务器出故障, 于是希望在这个服务器出故障(服务不可用)的情况下, 能指向其他服务器的链接. 解决方案一: XMLHTTP方案 以下代码摘自[2]中meizz的回帖: 复制代码 代码如下: <script language= "javascript"> function getURL(url) { var xmlhttp = new ActiveXO

  • javascript使用switch case实现动态改变超级链接文字及地址

    代码很简单,我这里就不多废话了,小伙伴们直接看源码吧. 复制代码 代码如下: <!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="te

  • javascript 对象数组根据对象object key的值排序

    有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数 函数定义: 复制代码 代码如下: function keysrt(key,desc) {   return function(a,b){     return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);   } } 使用: 复制代码 代码

  • javascript 同时在IE和FireFox获取KeyCode的代码

    HTML 复制代码 代码如下: <input type="password" name="psw" id="loginpsw" onkeypress="submit1(event)"/> Javascript 复制代码 代码如下: function submit1(e){ var isie = (document.all) ? true : false;//判断是IE内核还是Mozilla var key; if

  • 删除Javascript Object中间的key

    这个也不会,回家种田去吧你 复制代码 代码如下: delete thisIsObject[key] or delete thisIsObject.key 顺便我们来谈谈delete的用法 几个礼拜前, 我有了个机会去翻阅Stoyan Stefanov的 Object-Oriented Javascript 一书. 这本书在亚马逊上拥有很高的评价(12篇评论, 5颗星), 所以我很好奇地想看看它到底是不是那么值得推荐的一本书, 于是我开始阅读函数的那章. 我非常欣赏这本书解释事物的方式, 例子们被

  • php获取YouTube视频信息的方法

    php获取YouTube视频信息的方法

    本文实例讲述了php获取YouTube视频信息的方法.分享给大家供大家参考.具体分析如下: YouTube的视频地址格式 https://www.youtube.com/watch?v=[VIDEO_ID] 例子:https://www.youtube.com/watch?v=psvkyf3PzjE 复制代码 代码如下: //根据video id 获取YouTube视频信息  function getYouTubeInfo($video_id){      $content = file_get

  • JS实现从连接中获取youtube的key实例

    本文实例讲述了JS从连接中获取youtube的key的方法.分享给大家供大家参考.具体分析如下: 这段代码演示了从字符串中截取子字符串的方法 // Example link: // <a id="myLink" href="http://www.youtube.com/watch?v=cyRqR56aCKc&feature=PlayList&p=00000000000&index=0&playnext=1">Youtube

  • JavaScript 键盘event.keyCode值列表大全

    网上收集的KeyCode值方便大家查找: keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode

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

    URL地址自动添加的实现其实就是那么点内容:检测与替换. 检测 "检测"就是检测文字(字符串)内部是否有符合http地址的内容,显然,这需要用到正则表达式进行验证,这个工作前端和后台都可以做,这里,只讲前端的方法,使用JavaScript实现. 验证HTTP地址的正则表达式如下(可能有疏漏或是不准确之处,欢迎指正): 复制代码 代码如下: var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g; 前一部分匹配http或是https开头

  • Python实现从URL地址提取文件名的方法

    本文实例讲述了Python实现从URL地址提取文件名的方法.分享给大家供大家参考.具体分析如下: 如:地址为 http://www.jb51.net/images/logo.gif 要想从该地址提取logo.gif,只需要一句代码就可以搞定 import os url = 'http://www.jb51.net/images/logo.gif' filename = os.path.basename(url) print(filename) 输出为: logo.gif 希望本文所述对大家的Py

  • Javascript验证用户输入URL地址是否为空及格式是否正确

    复制代码 代码如下: <script type="text/javascript"> function checkUrl() { var url = document.getElementById('url').value; if (url==''){ alert('URL 地址不能为空'); return false; } else if (!isURL(url)) { alert('URL 的格式应该是 http://www.jb51.net'); return fal

  • 解决java页面URL地址传输参数乱码的方法

    以下就是为大家分享的URL地址传输参数乱码的解决方法: 1.在tomcat中配置:在tomcat安装目录下面找到conf下面的server.xml找到以下代码段,修改URIEncoding为GBK: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="GBK&q

  • ACCESS数据库修改自动编号的ID值为零的方法分享

    我们在开发软件,或者网站制作时候,经常用ACCESS MDB数据库进行调试,很多自动编号的数据都删除了,最后ID很大,或者不连贯.针对ACCESS数据库,有时候因删除内容导致ID跳号,或者其他原因,想修改自动编号的ID,怎么操作呢?让我们一步一步对ACCESS数据库ID进行归零,修改自动编号的ID值,再重新自动编号. 以下是我的修改方法,是可行的,与大家分享一下:(操作之前,一定要备份数据库,防止意外发生,呵呵) 1.备份ACCESS数据库(这个是必须的) 2.打开数据库,右键点击要修改ID值的

  • javascript自动恢复文本框点击清除后的默认文本

    本文实例介绍了点击文本框清除默认文本离开再恢复的js实例代码,分享给大家供大家参考,具体内容如下 相关知识: 1.onclick事件的定义和用法: 当点击对象的时候会触发此事件. 浏览器支持: 1).IE浏览器支持此事件. 2).火狐浏览器支持此事件. 3).Opera浏览器支持此事件. 4).谷歌浏览器支持此事件. 5).safria浏览器支持此事件. 实例代码: <html> <head> <meta charset="gb2312"/> <

  • PHP下打开URL地址的几种方法小结

    1: 用file_get_contents 以get方式获取内容 复制代码 代码如下: <?php $url='http://www.baidu.com/'; $html = file_get_contents($url); //print_r($http_response_header); ec($html); printhr(); printarr($http_response_header); printhr(); ?> 示例代码2: 用fopen打开url, 以get方式获取内容 复制

  • Android中实现下载URL地址的网络资源的实例分享

    通过URL来获取网络资源并下载资源简单实例: package com.android.xiong.urltest; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.MalformedURLException; import java.net.URL; import android.app.Activity; import android.gra

  • PHP中通过语义URL防止网站被攻击的方法分享

    什么是语义URL 攻击? 好奇心是很多攻击者的主要动机,语义URL 攻击就是一个很好的例子.此类攻击主要包括对URL 进行编辑以期发现一些有趣的事情. 例如,如果用户chris 点击了你的软件中的一个链接并到达了页面http://example.org/private.php?user=chris, 很自然地他可能会试图改变user的值,看看会发生什么.例如,他可能访问http://example.org/private.php?user=rasmus 来看一下他是否能看到其他人的信息.虽然对G

  • javascript中RegExp保留小数点后几位数的方法分享

    复制代码 代码如下: <script type="text/javascript">var db = "0.123456789";//原数值var num = 5;//小数点后位数var re = new RegExp("\d+\.\d{" + num + "}","gm"); alert(db.match(re));</script></td>   </tr>

随机推荐