最近项目有个需求:用户之间发送消息时,如果发送者输入的信息中含有网址文本,要在接受者界面中显示网址链接,点击该链接直接跳转到网页。
这个功能和 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. Python中装饰器的用法

    定义: 装饰器本身就是一个函数 为其他函数提供附加功能 不改变源代码 不改变原调用方式 装饰器=高阶函数+嵌套函数 知识点: 函数本身就是一个变量(意味着可以被复制给一个变量:test=test(1) ...

  2. 找出k个数相加得n的所有组合

    Find all possible combinations of k positive numbers that add up to a number n,each combination shou ...

  3. Activiti就是这么简单

    Activiti介绍 什么是Activiti? Activiti5是由Alfresco软件在2010年5月17日发布的业务流程管理(BPM)框架,它是覆盖了业务流程管理.工作流.服务协作等领域的一个开 ...

  4. 抓取Android应用的log

    今天测试软件时,遇到一个bug,因为开发说那边不复现,所以为了更好追踪这个问题,需要抓取复现步骤地log. 在网上查了相关资料,同时结合自己遇到的问题,总结如下. 1. 抓取Android 应用log ...

  5. 引用第三方dll引发的问题解决

    引用的程序集错误  如果引用第三方dll,调试出现引用的程序集出现错误,可以下载dependency,查看这个dll的依赖dll,如果本地电脑没有依赖dll或依赖dll出现问题,则下载或取代依赖dll ...

  6. JAVA NIO之文件通道

    1.简介 通道是 Java NIO 的核心内容之一,在使用上,通道需和缓存类(ByteBuffer)配合完成读写等操作.与传统的流式 IO 中数据单向流动不同,通道中的数据可以双向流动.通道既可以读, ...

  7. 1077. Kuchiguse (20)

    The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...

  8. [日常] PKUWC 2018爆零记

    吃枣药丸...先开个坑... day -1 上午周测...大翻车... 下午被查水表说明天必须啥啥啥...(当时我差点笑出声) 晚上领到笔记本一枚和一袋耗材(袜子) 然而班会开太晚回去没来得及收拾就晚 ...

  9. 新事物学习---Chrome上使用PWA

    PWA是什么 PWA(Progressive Web Apps)是 Google 最近在提的一种 Web App 形态 (或者如 Wikipedia 所称的"软件开发方法").PW ...

  10. 听翁恺老师mooc笔记(6)--指针运算

    指针值加1就是将指针值加上sizeof(指针所指变量的类型) 1+1=2,那么指针加1是加上了1这个数字吗?试一下,在代码中定义了char数组,char也是整数,数组名是ac,ac中有10个元素,0- ...