问题

有一段纯文本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. xcode对照两个分支中同一个文件

    对于同一个项目的两个分支,由于两个分支可能各自都做了一些改动.所以通过Source Control中的History...功能是无法查看的.例如以下图: 这个时候.我们须要用到xcode的另外一个功能 ...

  2. Android 经常使用设计模式（一）

    由于项目变更的频繁性,作为一名程序猿,我们须要掌握设计模式的必要性.就不言而喻~~.以下就是一些我自己学习的设计模式总结. 接下来,主要是针对几个比較经常使用模式进行解说,主要是以下几种: 观察者模式 ...

  3. http格式（graph）

    http请求格式 http请求头 字段 http响应 http响应头字段

  4. BestCoder Round #75 King&#39;s Order dp：数位dp

    King's Order Accepts: 381 Submissions: 1361 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 655 ...

  5. oracle 11gR2 如何修改vip

    因为业务需要,需要将p570a主机和p570b主机上的vip做修改 修改前ip 192.168.128.12   p570a-vip 192.168.128.13   p570b-vip 修改后ip ...

  6. NEUOJ 1702 撩妹全靠魅力值 (三维偏序)

    题目链接:http://acm.neu.edu.cn/hustoj/problem.php?id=1702 题目大意:就是问每个人三个属性同时不低于另外几个人....人不分先后 经典的三维偏序问题 解 ...

  7. 35.QT蝴蝶飞舞

    fly.h #ifndef FLY_H #define FLY_H #include <QObject> #include <QPainter> #include <QG ...

  8. Crawler4j快速入门实例

    项目是基于maven 结构的. 首先我们在pom.xml中加入log4j以及log4j驱动类支持: <!-- 加入log4j支持 --> <dependency> <gr ...

  9. sql server 启用数据库的 Service Broker

    使用SqlDependency时要开启Service Broker ,那么SqlDependency是什么 https://www.cnblogs.com/zhaoyihao/p/5663258.ht ...

  10. java实现简单回文算法

    算法要求 编写一个程序,判断一个字符串是否为"回文".回文串:字符串字符从前往后与从后往前一致(中心对称). 算法思路 首先将字符串等分左右两块,然后依次对称比较每一对字符是否相同 ...