导言

富文本编辑器是我们生活中比较常见的编辑器，包含博客编辑器，world文档编辑器都属于富文本编辑器，从字面上理解就是丰富多彩的文本编辑器。最近几年基于markdown的富文本编辑器越来越受到作者人群的喜欢，那么markdown中特定字符实现不同格式的渲染方法是怎么实现的呢？

markdown语法分析

markdown语法分析.png
分析内容：
从上图可见markdown语法大致分为三类：
第一类为文本类：标题，斜体，粗体，引用文字
第二类为链接类：图片，网址，音频，视频
第三类为复合类：有序列表，无序列表，代码块

markdown字符转换

标题转换

/**
         * 转换标题
         * @param {Object} msg
         */
        function transitionTitle(msg) {
            var reg = /(#{1,5})(.*?)(<div><br><\/div>)/g;
            var objExp = new RegExp(reg);
            var value = msg.match(objExp);
            var now = msg.replace(objExp, function($1, $2, $3, $4) {
                if($2.length == 1) {
                    $2 = "<h1>"
                    $4 = "</h1>" + $4;
                } else if($2.length == 2) {
                    $2 = "<h2>";
                    $4 = "</h2>" + $4;
                } else if($2.length == 3) {
                    $2 = "<h3>";
                    $4 = "</h3>" + $4;
                } else if($2.length == 4) {
                    $2 = "<h4>";
                    $4 = "</h4>" + $4;
                } else if($2.length == 5) {
                    $2 = "<h5>"
                    $4 = "</h5>" + $4;
                }

                return $2 + $3 + $4;
            });
            return now;
        }

var reg = /(#{1,5})(.*?)(<div>
</div>)/g;
*#{1,5}检索#字符将其转换为标题标签，其中#代表h1,##代表h2....依次类推。
*<div>
</div>如果编写博客项目键盘敲打回车会自动创建<div>
</div>组标签，由于正则表达始终/需要转换为可匹配字符所以需要反斜杠来转换。

图片链接转换

/**
         * 转换图片
         * @param {Object} msg
         */
        function transitionImage(msg) {
            var reg = /!\[(.*?)]\((.*?)\)/g;
            var objExp = new RegExp(reg);
            var value = msg.match(objExp);
            var now = msg.replace(objExp, function($1, $2, $3) {
                    $3 = '<img src="'+$3+'" />'
                    $2 = "<h3>"+$2+"</h3>" ;
                return $3+$2;
            });
            return now;
        }

*正则表达式中对[、（、）等属于预留字符，所有都需要将其使用反斜杠转换
*由于图片转换为图文结合，所以需要使用到img，h3标签（自行选择文本标签调节），图片在上，文本在下所有需要两者转换拼接。

网址转换

/**
         * 转换网址
         * @param {Object} msg
         */
        function transitionHref(msg) {
            var reg = /\[(.*?)]\((.*?)\)/g;
            var objExp = new RegExp(reg);
            var value = msg.match(objExp);
            var now = msg.replace(objExp, function($1, $2, $3) {
                    $2 = '<a href="'+$3+'" >'+$2+'</a>'
                    
                return $2;
            });
            return now;
        }

*网页转换同图片转换雷同，不过这里需要使用a标签，并且取出相应字符串赋值

转换代码块

/**
         * 转换代码块
         * @param {Object} msg
         */
        function transitionCode(msg) {
            var reg = /(```<div><br><\/div>)(.*?)(```<div><br><\/div>)/g;
            var objExp = new RegExp(reg);
            var value = msg.match(objExp);
            var now = msg.replace(objExp, function($1, $2, $3,$4) {
                    $3 = '<div class="code-content" >'+$3+'</div>'
                    
                return $3;
            });
            return now;
        }

*代码块转换为前后两组字符，转换需要存放在容器div当中，当然style样式需要自行设置。

解析

上面列举常见的几个转换功能块，其中核心就是正则表达式的运用，下面我依次解析以上的例子：
eg:/(#{1,5})(.*?)(<div>
</div>)/g

{1,5}表示#有1~5个

.*?表示任意字符
（）表示括号中为独立表达式，根据（）的数量依次可以可到2,2.
g为全局的，用于全局扫描。
/.../常用来标识正则表达式

结语

通过上面解析分析与案例，不得不说正则表达式的博大精深，如果说sql语言是学习最划算语言，那么正则表达式绝对可以算作第二划算的语言，所以如果还对正则表达式不怎么熟悉的朋友，不妨通过markdown这个案例亲身体验一下正则表达式的魅力。