问题

有一段纯文本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. PowerDesigner16 破解

    近期开发项目,涉及到实体设计这块的时候,用的是PowerDesigner16,使用是挺方便的,可是存在一个问题.那就是PowerDesigner16存在一个试用期的问题,过期就打不开了. 之前好多同学 ...

  2. HDU 1269 -- 迷宫城堡【有向图求SCC的数目 &amp;&amp; 模板】

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  3. hdoj--1028--Ignatius and the Princess III（母函数）

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  4. 【转】解析<button>和<input type="button"> 的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  5. Cookie是存储在客户端上的一小段数据

    背景 在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式.生存期.使用范围.安全性. 在JavaSc ...

  6. （转载） Android Studio你不知道的调试技巧

    Android Studio你不知道的调试技巧 标签: android studio 2015-12-29 16:05 2514人阅读 评论(0) 收藏 举报  分类: android(74)    ...

  7. 3ds Max制作欧式风格的墙壁路灯效果

    在这篇文章中,我将解释我创建我的形象元宵节的步骤.我只是在寻找一个很好的参考图像在互联网上的东西,我觉得我想要的模型,这个形象.我发现了一个巨大的灯笼形象,但在白天的图片拍摄.我想改变我的形象和显示的 ...

  8. ZBrush中Flatten展平笔刷介绍

    本文我们来介绍ZBrush®中的Flatten展平笔刷,Flatten笔刷能增加粗糙的平面在模型表面,利用它能够制作出完全的平面. Flatten展平笔刷 Flatten(展平):Flatten笔刷可 ...

  9. day20 匿名函数,内置函数,面向过程编程

    目录 有名函数 匿名函数 max() min() sorted map filter 内置函数 面向过程编程 有名函数 def f1(): print('my name is f1') f1() my ...

  10. Eclipse安装不了AXIS2 Tool插件,总是找不到axis2 wizards的问题找到解决答案（转载）

    http://blog.csdn.net/downmoon/article/details/7309485 最近在学习axis2工作需要,google一搜,网上到处都是装axis2插件的.根据网上的直 ...