javaScript识别网址文本并转为链接文本
最近项目有个需求:用户之间发送消息时,如果发送者输入的信息中含有网址文本,要在接受者界面中显示网址链接,点击该链接直接跳转到网页。
这个功能和 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识别网址文本并转为链接文本的更多相关文章
- Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载
元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...
- 011_如何decode url及图片转为base64文本编码总结
一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...
- HTML meta 文本 格式排版 链接图表 列表 表单 frame后台布局实例
meta标签 content属性必须和http-equiv或者name属性一起使用 http-equiv属性,就是http当量,用于和服务器发送数据前的提交交互使用.(另层含义这个当量在浏览器和服务器 ...
- JavaScript实现点击复制按钮复制文本框的内容,兼容IOS
<lable> <input type="text" id="txt"> <a href="javascript:;&q ...
- 将python图片转为二进制文本的实例
https://www.jb51.net/article/155342.htm 写在最前面: 我在研究机器学习的过程中,给的数据集是手写数字图片被处理后的由0,1表达的txt文件,今天写一写关于图片转 ...
- 通过正则把文本里的链接加上a标签
把文本里的链接替换成a标签 function addLinks($text) { return preg_replace('/(http[s]?:\/\/[A-Za-z0-9]+\.[A-Za-z0- ...
- java正则 读取html 获取标题/超链接/链接文本/内容
java正则 读取html 获取标题/超链接/链接文本/内容 参考链接:http://yijianfengvip.blog.163.com/blog/static/175273432201142785 ...
- Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载
元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...
- JavaScript校验网址
JavaScript校验网址 var linkUrl = 'https://www.baidu.com' if( typeof (linkUrl) != undefined && li ...
随机推荐
- IE浏览器右键菜单插件开发(上篇)——自定义一个IE右键菜单项
要做一个IE右键浏览器插件,得3步走. 第一,在IE右键菜单上添加自定义菜单名称,是通过注册表实现的,如下: string regkey = @"Software\Microsoft\Int ...
- Tomcat5.5.9+JSP经典配置实例
一.开发环境配置 第一步:下载j2sdk和tomcat:到sun官方站(http://java.sun.com/j2se/1.5.0/download.jsp)下载j2sdk,注意下载版本为Windo ...
- 关于脱离laravel框架使用Illuminate/Validation验证器
1.关于Illuminate/Validation验证器 Validation 类用于验证数据以及获取错误消息. github地址:github.com/illuminate/validation 文 ...
- TortoiseGit- 创建本地新分支,提交推送到远程,本地新分支合并到工作分支,提交到远程工作分支等。
整体思路: 创建本地新分支 (create branch) -- 切换到本地新分支工作 (switch/checkout) --提交修改 (commit) -- 推送到远程新分支 (push) ...
- const 相关知识 const和指针、const和引用
以前老是对const概念不清不楚,今天算是好好做个笔记总结一下.以下内容包括1)常量指针(指针本身是常量),2)指针常量(指针指向的是常量对象),3)常量引用,4)const成员函数. 常量指针,指针 ...
- linux利用ssh远程执行多台机器执行同样的命令
这篇文章主要介绍了ssh远程执行命令方法和Shell脚本实例,本文讲解了ssh执行远程操作方法和远程执行命令shell脚本示例,需要的朋友可以参考下 ssh执行远程操作命令格式代码如下: ssh -t ...
- input输入框限制输入正整数、小数、字母、文字
有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...
- Git忽略规则.gitignore梳理
对于经常使用Git的朋友来说,.gitignore配置一定不会陌生.废话不说多了,接下来就来说说这个.gitignore的使用. 首先要强调一点,这个文件的完整文件名就是".gitignor ...
- 新手使用mac上的textedit写HTML时遇到的问题及解决办法
刚开始在mac上学习HTML,总结一下遇到的问题和解决办法 问题:使用textedit编写html,在网页上却仍然显示的是代码. 解决办法: 打开textedit后打开文本编辑 选择偏好设置 按如图所 ...
- C语言指针作业总结
学号 姓名 作业地址 PTA实验作业5 PTA排名2 阅读代码2 总结1 代码规范 总分 是否推荐博客 推荐理由 32 **薇 http://www.cnblogs.com/linyiwei/p/80 ...