问题

有一段纯文本text, 欲将其插入DOM节点div中. text中可能有超链接, 邮件地址等. 假设有, 识别之.

分析

  1. 假设仅仅是纯文本, 插入div中, 仅仅要将div.innerText设置为text就可以.
  2. text中的URI地址能够用正则识别, 并将其替换为<a/>标签组成的字符串. 此时 text变成了HTML字符串html.
  3. HTML字符串html能够赋值给div.innerHTML. 但假设原text中存在HTML语义的 字符串呢?

    因此, 在识别URI之前, 须要将原text作转义.

解决

uri-recognition.js

(function () {

    var trim = function (s) {

        /*jslint eqeq:true*/

        if (s == null || s === '') {

            return '';

        }

        // s 空格

        // 	 制表符

        // xA0 non-breaking spaces

        // 3000中文空格

        return String(s).replace(/^[s	xA03000]+/, '').

            replace(/[s	xA03000]+$/, '');

    },

    startsWith = function (s, sub) {

        s = String(s);

        return s.indexOf(sub) === 0;

    },

    test = function (str) {

        /*jslint maxlen: 100*/

        var URI_REG = /(https?://|www.|ssh://|ftp://)[a-z0-9&_+-?/.=#]+/i,

            MAIL_REG = /[a-z0-9_+-.]+@[a-z0-9_+-.]+/i;

        str = trim(String(str));

        return URI_REG.test(str) || MAIL_REG.test(str) || false;

    },

    /**

     * @param {String} str

     * @param {Function} replacer

     */

    replace = function (str, replacer) {

        /*jslint maxlen: 100*/

        var URI_REG = /(https?://|www.|ssh://|ftp://)[a-z0-9&_+-?

/.=#]+/gi,

            MAIL_REG = /[a-z0-9_+-.]+@[a-z0-9_+-.]+/gi;

        str = trim(String(str));

        str = str.replace(URI_REG, function (match) {

            var newStr =  replacer({

                mail: false,

                fullURI: startsWith(match.toLowerCase(), 'www.') ?

('http://' + match) : match,

                match: match

            });

            /*jslint eqeq: true*/

            return newStr == null ?

match : newStr;

        });

        str = str.replace(MAIL_REG, function (match) {

            var newStr =  replacer({

                mail: true,

                fullURI: 'mailto:' + match,

                match: match

            });

            /*jslint eqeq: true*/

            return newStr == null ?

match : newStr;

        });

        return str;

    },

    uriRecognition = function (text) {

        var doc = document,

            html;

        text = trim(String(text));

        if (test(text)) {

            //use {} to escape

            text = text.replace(/{<}/g, '{{<}}').

                replace(/{>}/g, '{{>}}').

                replace(/</g, '{<}').

                replace(/>/g, '{>}');

            html = replace(text, function (info) {

                if (!info || !info.match || !info.fullURI) {

                    return null;

                }

                var link = doc.createElement('a');

                link.setAttribute('href', info.fullURI);

                /*jslint eqeq: true*/

                if (link.innerText != null) {

                    link.innerText = info.match;

                } else if (link.textContent != null) {

                    link.textContent = info.match;

                }

                return link.outerHTML;

            });

            html = html.replace(/{<}/g, '<').

                replace(/{>}/g, '>');

            return {

                content: html,

                isPlainText: false

            };

        }

        return {

            content: text,

            isPlainText: true

        };

    },

    setContentWithURIRecognition = function (el, text) {

        var result = uriRecognition(text);

        if (!result) {

            return;

        }

        if (result.isPlainText) {

            if (el.innerText != null) {

                el.innerText = result.content;

            } else if (el.textContent != null) {

                el.textContent = result.content;

            }

        } else {

            el.innerHTML = result.content;

        }

    };

    window.uriRecognition = uriRecognition;

    window.setContentWithURIRecognition = setContentWithURIRecognition;

})();

test.html

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <title>uri regcognition</title>

    </head>

    <body>

        <script src="./uri-recognition.js" type="text/javascript"></script>

        <script type="text/javascript">

            var text = '<a href="http://china.haiwainet.cn/n/2014/0509/c232587-20619235.html" ' +

                    'mon="ct=1&a=2&c=top&pn=8" target="_blank">' +

                    '纽约时报：阿里巴巴IPO将风险推向全新水平</a>' +

                    ' send to example@example.com xxxx',

                div = document.createElement('div');

            window.setContentWithURIRecognition(div, text);

            document.body.appendChild(div);

        </script>

    </body>

</html>

Chrome下測试OK.

纯文本中识别URI地址并转换成HTML的更多相关文章

  1. C#将image中的显示的图片转换成二进制

    原文:C#将image中的显示的图片转换成二进制 1.将Image图像文件存入到数据库中 我们知道数据库里的Image类型的数据是"二进制数据",因此必须将图像文件转换成字节数组才 ...

  2. ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系（从WKID=4326到WKID=102100）

    原文:ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系(从WKID=4326到WKID=102100) 对于非地理专业的开发人员,对与这些生涩的概念,我们不一定都要了解,但是我们要理解,凡是 ...

  3. C#中实体集合和实体转换成相应的string、XDocument、XElement

    C#中实体集合和实体转换成相应的string.XDocument.XElement public class SimpleXmlConverter { public static string ToX ...

  4. 字符串A转换到字符串B，只能一次一次转换，每次转换只能把字符串A中的一个字符全部转换成另一个字符，是否能够转换成功

    public class DemoTest { public static void main(String[] args) { System.)); } /** * 有一个字符串A 有一个字符串B ...

  5. 如何用OCR文字识别软件将PDF转换成Excel

    最近老板老是让小编处理PDF文件,这OCR识别软件咱也不懂,也不敢问,只能一字一字的码在Excel上,但是这波操作效率不高,还没完成任务,老板又发了一堆PDF文件需要处理,怎么办呢? 跟朋友说了这事后 ...

  6. [转]C#将image中的显示的图片转换成二进制

    本文转自:http://www.cnblogs.com/shuang121/archive/2012/07/09/2582654.html .将Image图像文件存入到数据库中 我们知道数据库里的Im ...

  7. python3.6 + selenium2.53.1 查询数据库并将返回的内容中每一行的内容转换成class对象

    环境: win10 python3.6 selenium2.53.1 准备工作:先安装pymysql python2.x链接数据库使用MySQLdb,而python3.x链接数据库使用pymysql ...

  8. Java中Office(word/ppt/excel)转换成HTML实现

    运行条件:JDK + jacob.jar + jacob.dll 1) 把jacob.dll在 JAVA_HOME\bin\ 和 JAVA_HOME\jre\bin\ 以及C:\WINDOWS\sys ...

  9. 转：ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系（从WKID=4326到WKID=102100）

    对于非地理专业的开发人员,对与这些生涩的概念,我们不一定都要了解,但是我们要理解,凡是以经纬度为单位的都是地理坐标系,因为它归根结底是一个椭球体,只不过各个国家为了反映该国家所在区域地球的真实形状,而 ...

随机推荐

  1. js面向对象编程：怎样实现方法重载

    js中怎样实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的參数arguments 3怎样利用arguments实现方法重载 1同名函数的调用问题 都知道在js中假设存在多个名称同样 ...

  2. ubuntu16.04安装配置mysql数据库，分割视频为帧图像

    参考http://wiki.ubuntu.org.cn/MySQL%E5%AE%89%E8%A3%85%E6%8C%87%E5%8D%97 版本为5.7 一.安装 安装命令sudo apt-get i ...

  3. AngularJS 下拉列表demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  4. 25.QT进度条

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> 5 #include <QProgressBar&g ...

  5. [转]C#多线程和线程池

    鸣谢原文:http://www.cnblogs.com/wwj1992/p/5976096.html 1.概念  1.0 线程的和进程的关系以及优缺点 windows系统是一个多线程的操作系统.一个程 ...

  6. 基于mysql主从同步的proxy读写分离

    mysql-proxy 简介 MySQL Proxy是一个处于你的client端和MySQL server端之间的简单程序,它可以监测.分析或改变它们的通信.它使用灵活,没有限制,常见的用途包括:负载 ...

  7. 指定的WSDL可能与所选的工具包不兼容

    使用LoadRunner在webservice协议下,import service的时候,报错: can not fetch WSDL,the specified WSDL datathe speci ...

  8. 【XSY2689】王子 - 网络流

    复活!qwq 题目来源:2018冬令营模拟测试赛(九) 题意: [背景描述]     不是所有王子都会遇见自己的中关村,主公,公主. 从前有个王子姓王,王王子遇到了一位美丽的公主,她的名字当然是公公主 ...

  9. 进入docker 容器内命令

    docker exec :在运行的容器中执行命令 语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...] OPTIONS说明: -d :分离模式: 在后 ...

  10. UVA340-Master-Mind Hints（紫书例题3.4）

    MasterMind is a game for two players. One of them, Designer, selects a secret code. The other, Break ...