最近项目有个需求:用户之间发送消息时,如果发送者输入的信息中含有网址文本,要在接受者界面中显示网址链接,点击该链接直接跳转到网页。
这个功能和 QQ 发送网址文本的效果非常像,可以说是一模一样的。

思路:首先,要判断文本中是否含有网址文本,其次,将网址文本转换为可点击的链接文本,即将网址文本通过a标签括起来。

判断网址:

在 javaScript 中判断某种特殊格式的文本,首选正则表达式,下面是我用来检查网址的正则:

var re = /^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/g;

这里需要注意的是,正则必须使用全局匹配 g 。否则只能匹配到文本中的第一个网址文本。

网址转换为链接文本:

在网址转换中涉及字符串的操作,那么自然要使用 String 对象的方法,先复习下 String 对象能与正则表达式一起使用的方法有哪些?
常用的有这几个:

search:检索与正则表达式相匹配的值。
match:找到一个或多个正则表达式的匹配。
replace:替换与正则表达式匹配的子串。
split:把字符串分割为字符串数组。

可以看出来,其中 replace 是最方便、最适合这个需求的。

replace函数的使用方法:

语法:

string.replace(searchvalue,newvalue)

参数解析:

searchvalue:必须。规定子字符串或要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。

newvalue:必需。一个字符串值。规定了替换文本或生成替换文本的函数。

注意:第二个参数支持使用函数来制定文本替换的规则。

回顾需求,要将网址转换为a链接,那么得到的转换规则如下:

url => <a href='url' target='_blank'>url</a>

根据上面的分析过程,使用代码来描述如下:

var urlToLink = function(str){
var re = /^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/g; str = str.replace(re, function(website){
return "<a href='" + website +"' target='_blank'>" + website + "</a>";
});
return str;
};

到这里,javaScript识别网址文本并转为链接文本的函数接完成了。

javaScript识别网址文本并转为链接文本的更多相关文章

  1. Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

    元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...

  2. 011_如何decode url及图片转为base64文本编码总结

    一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...

  3. HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例

    meta标签 content属性必须和http-equiv或者name属性一起使用 http-equiv属性,就是http当量,用于和服务器发送数据前的提交交互使用.(另层含义这个当量在浏览器和服务器 ...

  4. JavaScript实现点击复制按钮复制文本框的内容,兼容IOS

    <lable> <input type="text" id="txt"> <a href="javascript:;&q ...

  5. 将python图片转为二进制文本的实例

    https://www.jb51.net/article/155342.htm 写在最前面: 我在研究机器学习的过程中,给的数据集是手写数字图片被处理后的由0,1表达的txt文件,今天写一写关于图片转 ...

  6. 通过正则把文本里的链接加上a标签

    把文本里的链接替换成a标签 function addLinks($text) { return preg_replace('/(http[s]?:\/\/[A-Za-z0-9]+\.[A-Za-z0- ...

  7. java正则 读取html 获取标题/超链接/链接文本/内容

    java正则 读取html 获取标题/超链接/链接文本/内容 参考链接:http://yijianfengvip.blog.163.com/blog/static/175273432201142785 ...

  8. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  9. JavaScript校验网址

    JavaScript校验网址 var linkUrl = 'https://www.baidu.com' if( typeof (linkUrl) != undefined && li ...

随机推荐

  1. SpringMVC【校验器、统一处理异常、RESTful、拦截器】

    前言 本博文主要讲解的知识点如下: 校验器 统一处理异常 RESTful 拦截器 Validation 在我们的Struts2中,我们是继承ActionSupport来实现校验的...它有两种方式来实 ...

  2. 记录解决python在spark运行加载第三方库的问题

    一般写python的我们经常会import一些常用的库,然后有时集群环境上的python没有这些库,怎么办呢? 通过一段时间的摸索发现有二种方式可以解决这个问题: 第一种方法: 下载对应python的 ...

  3. xlsx导入成--json

    这两天遇到大难题了,就是这个   xlsx   导入问题,之前用的xlsx.full.min.js,写的导入,结果不兼容ie浏览器,研究这个也好长时间,网上居然还没有搜到合适的,自己写从xlsx官网上 ...

  4. Python基础-week01

    本节内容摘要:http://www.cnblogs.com/Jame-mei Python介绍 Python是怎么样的语言? Python 2 or 3? 安装 Hello World程序 变量 用户 ...

  5. elasticsearch基本操作之--java基本操作 api

    /** * 系统环境: vm12 下的centos 7.2 * 当前安装版本: elasticsearch-2.4.0.tar.gz */ 默认进行了elasticsearch安装和ik安装, 超时配 ...

  6. DBI-1.634之selectrow_array与fetchrow_array的区别

    在DBI-1.634使用手册里有一个selectrow_array函数,该函数具体说明如下: This utility method combines "prepare", &qu ...

  7. Struts2 学习之小白开始

    Struts2 基础知识学习总结 Struts2 概述:Struts2 是一个用来开发 MVC 应用程序的框架,他提供了 Web 应用程序开发过程中的一些常见问题的解决方案,比如对于用户输入信息合法性 ...

  8. [POJ 2226] Muddy Fields

    题目 Description 如何放木板保证只覆盖到 '*' 而没有覆盖到 '.' Solution (我太废了竟然想这题想了一个小时)考虑当前需要被覆盖的点 (x,y),假设有一块横着铺的木板 i ...

  9. Maven-05:插件目标

    在学习插件和生命周期的绑定关系之前,必须先了解插件目标(plugin goal). 我们知道,Maven的核心仅仅定义了抽象的生命周期,具体的任务是交由插件完成的,插件以独立的构件形式存在,因此Mav ...

  10. 【Python】 获取MP3信息replica

    replica 初衷是想要整理iphone中的音乐.IOS(我自己的手机还是IOS8.3,新版本的系统可能有变化了)自带的音乐软件中所有音乐文件都存放在/var/mobile/Media/iTunes ...