问题

有一段纯文本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. android继续探索Fresco

    我们接着上文继续说,上篇博客中我们已经知道了Fresco怎么用,也知道了它的非常多属性.可是非常多时候xml文件是不能满足你的要求的.这就须要你在代码中动态的改变显示的内容,今天我们就来探索一下怎样在 ...

  2. android 九宫格（16宫格）控件

    public class NineRectView extends ViewGroup { private Context ctx; private int wSize,hSize,row,colum ...

  3. 杭电 1016 Prime Ring Problem

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  4. uiautomator中InteractionController学习笔记(8)

    4.1版本号 InteractionController将用户的键盘事件注入到android系统中,与系统进行交互(电视为什么不能设计成可组装,屏幕多大自己决定,想 多大就多大) click(int, ...

  5. audio_coding模块分析和audio_conference_mixer模块分析

    audio_coding 1. 主要接口      AudioCodingModuleImpl::RegisterReceiveCodec 初始化Codec      AudioCodingModul ...

  6. IOC与DI区别

    (1)IOC:控制反转,把对象创建交给spring进行配置. (2)DI:依赖注入,向类里面的属性中设置值. (3)关系:依赖注入不能单独存在,需要在IOC的基础之上完成操作.

  7. Java-杂项： Java中Array和ArrayList区别

    ylbtech-Java-杂项: Java中Array和ArrayList区别 1.返回顶部 1. 1)精辟阐述:可以将 ArrayList想象成一种“会自动扩增容量的Array”. 2)Array( ...

  8. Spark Streaming概念学习系列之SparkStreaming的高层抽象DStream

    不多说,直接上干货! SparkStreaming的高层抽象DStream 为了便于理解,Spark Streaming提出了DStream抽象,代表连续不断的数据流. DStream 是一个持续的R ...

  9. Mediator 基于内存的发布订阅

    Github Mediator 使用方法 /// <summary> /// 返回值 BaseEntity /// </summary> public class Ping1 ...

  10. 错误：java.lang.IllegalArgumentException: Receiver not registered

    Caused by: java.lang.IllegalArgumentException: Receiver not registered: com.multak.cookaraclient.Mai ...