zoukankan      html  css  js  c++  java
  • 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识别网址文本并转为链接文本的函数接完成了。

  • 相关阅读:
    Android&Java面试题大全—金九银十面试必备
    android招聘啦,美图秀秀欢迎你加入!
    android经典源码,很不错的开源框架
    MongoDB、Hbase、Redis等NoSQL优劣势、应用场景
    体验go语言的风骚式编程
    金九银十中,看看这31道Android面试题
    android高级页面效果集锦
    flask中的request
    flask笔记(三)Flask 添加登陆验证装饰器报错,及解析
    flask笔记(二)
  • 原文地址:https://www.cnblogs.com/jofun/p/8736591.html
Copyright © 2011-2022 走看看