问题

有一段纯文本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. 双向链表的实现与操作(C语言实现)

    双向链表也叫双链表,是链表的一种,它的每一个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的随意一个结点開始,都能够非常方便地訪问它的前驱结点和后继结点. 单链表的局限 1.单 ...

  2. lpa标签传播算法解说及代码实现

    package lpa; import java.util.Arrays; import java.util.HashMap; import java.util.Map; public class L ...

  3. what we benefit from big data

    大数据玩的是什么,趋势,故障,寿命? 物联网拉动的是终端厂商的销量,作为终端设备生产商(OEM).无论是汽车.手机.家电行业.最有理由推动物联网的普及,可是作为传统行业,玩"网"并 ...

  4. 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不全然一致

    我们一般在定义CSS样式的时候都须要定义去掉HTML标签默认样式的CSS,原因是在不同的浏览器以下它们的表现出来的默认样式不全然一致,我们要保证在不同的浏览器下它们能正常显示出我们想要达到的预期效果, ...

  5. java位运算笔记

    位运算: ~(非)-->二进制数进行0和1的互换 样例: public class Test { public static void main(String[] args) { System. ...

  6. swift属性观察者机智

    为了让程序能在属性被赋值时获得执行代码的机会.swift提供了属性观察者机智,属性观察者其实就两个特殊的回调方法 willSet:被观察的属性即将被赋值之前自动调用该方法 didSet:被观察的属性被 ...

  7. Spring《三》ref 引用其他bean

    local属性 1.被引用id必须在同一个xml中. 2.被引用id必须使用id命名. 优点提前检查所使用的bean id是否正确. Bean属性 1.Bean指定的id可以在不同的xml中. 2.B ...

  8. VS头部自动注释

    1.找你的vs安装目录, 比如我的是在D盘D:\Program Files\Microsoft\VS2013\Common7\IDE 2.然后点击右上角的 搜索. 搜索Class.cs文件 3.把里面 ...

  9. js从数组中取出n个不重复的数据

    /** * 首先,针对这个数组做一个去重处理,避免你在后面取数据的时候,因为取到相同的元素而又要多去取一次随机数 * 将获取到的不重复的数组,再到这里样本里面去取随机数 * 每取到一次,就将这个元素从 ...

  10. signature验证/salt验证/token验证的作用

    1.salt验证: salt是随机生成的一串字符,salt验证的作用是将生成的salt与加密的密码密文拼接后再次加密存储  这样可以是存储在数据库中的密码更加安全 2.signature验证: I.将 ...