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

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

赞 (0)

相关推荐

  • JS实现很酷的EMAIL地址添加功能实例

    本文实例讲述了JS实现很酷的EMAIL地址添加功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现很酷的EMAIL地址添加功能</title> <style type="text/css"> ul{ list-style:none; margin:0; padding:0;} li{ margin:0; padding:0;} #content{widt

  • js实现移动端编辑添加地址【模仿京东】

    js实现移动端编辑添加地址【模仿京东】

    效果图: 注:这里的数据格式用的是jsonp,json在这里存在跨域问题 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,"&

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

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

  • JavaScript实现浏览器网页自动滚动并点击的示例代码

    JavaScript实现浏览器网页自动滚动并点击的示例代码

    1. 打开浏览器控制台窗口 JavaScript通常是作为开发Web页面的脚本语言,本文介绍的JavaScript代码均运行在指定网站的控制台窗口.一般浏览器的开发者窗口都可以通过在当前网页界面按F12快捷键调出,然后在上面的标签栏找到Console点击就是控制台窗口,在这里可以直接执行JavaScript代码,而chrome系浏览器的控制台界面可以使用快捷键Ctrl+Shift+J直接打开 2. 实时查看鼠标坐标 首先为了获取当前的鼠标位置的x.y坐标,需要先重写一个onmousemove函数

  • python自动从arxiv下载paper的示例代码

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2020/02/11 21:44 # @Author : dangxusheng # @Email : dangxusheng163@163.com # @File : download_by_href.py ''' 自动从arxiv.org 下载文献 ''' import os import os.path as osp import requests from lxml impor

  • C# WinForm实现自动更新程序之客户端的示例代码

    C# WinForm实现自动更新程序之客户端的示例代码

    目录 前言 开发环境 开发工具 实现代码 实现效果 前言 第二步理论上我们该写客户端了,但是,在此之前,需要先介绍下一些必要的方法以及操作. 写代码还是要尽量的保证通用性,以便以后需要的时候可以拿来稍微改改甚至直接使用.所以在这里我们将自动更新的程序抽象出来,即对于客户端来说,它只包含三个文件(AutoUpdate.dll.AutoUpdate.exe.UpdateList.xml,如果是.NET Framework的话,其实是没有AutoUpdate.dll文件的,就一个exe就足够了.这也是

  • url地址自动加#号问题说明

    web开发中,有时候给超链接写点击事件时候喜欢这样写: <a href="#" onclick="link();" >操作</a> 有次用jquery提交ajax请求后,当前页的url参数末尾就会自动给加个#号.开始百思不得其解,纠结了半天原来是这种写法的问题,换成 href="javascript:void(0);" 后问题不在出现. 注: # 包含了一个位置信息,默认的锚点是#top 也就是网页的上端,而javascr

  • JavaScript实现邮箱地址自动匹配功能代码

    JavaScript实现邮箱地址自动匹配功能代码

    自动匹配技术:简单的来说就是"根据用户输入的信息来提示一些相似项供用户选择".具有很广泛的应用,比如我们最常用的百度,当输入一些搜索内容后会自动匹配很多相关信息:再比如我们最常用的输入法,都是使用这种技术,当然这些都比较难了.下面这个例子是比较简单的我们常用邮箱的匹配.代码如下: 1.css代码 #match_email { margin-left:48px; overflow:auto; display:none; width:200px; border:1px solid #aaa

  • Sharding-JDBC自动实现MySQL读写分离的示例代码

    Sharding-JDBC自动实现MySQL读写分离的示例代码

    目录 一.ShardingSphere和Sharding-JDBC概述 1.1.ShardingSphere简介 1.2.Sharding-JDBC简介 1.3.Sharding-JDBC作用 1.4.ShardingSphere规划线路图 1.5.ShardingSphere三种产品的区别 二.数据库中间件 2.1.数据库中间件简介 2.2.Sharding-JDBC和MyCat区别 三.Sharding-JDBC+MyBatisPlus实现读写分离 3.0.项目代码结构和建表SQL语句 3.

  • [Android] 通过GridView仿微信动态添加本地图片示例代码

    [Android] 通过GridView仿微信动态添加本地图片示例代码

    前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述GridView控件实现添加本地图片并显示.主要是关于GridView控件的基本操作,通常可以通过自定义继承BaseAdapter的适配器加载图片,而下面讲述的不是自定义的适配器,而是调用SimpleAdapter实现的.至于上传发布与网络交互此处不讲述,后面文章会讲! 一. 实现效果 主要是通过点击+从本地相册中添加图片,同时显示图片至GridView.点击图片可以进行删除操作,同时界面中的发布EditView控件也很好看

  • python自动发邮件库yagmail的示例代码

    python自动发邮件库yagmail的示例代码

    之前使用的python的smtplib.email模块发模块的一步步骤是: 一.先导入smtplib模块  导入MIMEText库用来做纯文本的邮件模板 二.发邮件几个相关的参数,每个邮箱的发件服务器不一样,以126为例子百度搜索服务器是  smtp.126.com 三.写邮件主题和正文,这里的正文是HTML格式的 四.最后调用SMTP发件服务 一般发邮件方法 我以前在通过Python实现自动化邮件功能的时候是这样的: import smtplib from email.mime.text im

  • django之跨表查询及添加记录的示例代码

    创建表 书籍模型: 书籍有书名和出版日期,一本书可能会有多个作者,一个作者也可以写多本书,所以作者和书籍的关系就是多对多的关联关系(many-to-many); 一本书只应该由一个出版商出版,所以出版商和书籍是一对多关联关系(one-to-many). 创建一对一的关系:OneToOne("要绑定关系的表名") 创建一对多的关系:ForeignKey("要绑定关系的表名") 创建多对多的关系:ManyToMany("要绑定关系的表名")  会自动

随机推荐