Markdown-富文本转换(1)

导言

富文本编辑器是我们生活中比较常见的编辑器，包含博客编辑器，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>组标签，由于正则表达始终/需要转换为可匹配字符所以需要反斜杠来转换。

image.png

图片链接转换

/**
         * 转换图片
         * @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样式需要自行设置。

image.png

解析

上面列举常见的几个转换功能块，其中核心就是正则表达式的运用，下面我依次解析以上的例子：
eg:/(#{1,5})(.?)(<div>
</div>)/g
(1):#{1,5}表示#有1~5个
(2):.?表示任意字符
(3):（）表示括号中为独立表达式，根据（）的数量依次可以可到 $1,$ 2, $3...其中第一个括号中匹配标识为$ 2.
(4):g为全局的，用于全局扫描。
(5):/.../常用来标识正则表达式

补充说明：

1.为什么会匹配<div>
</div>这段标签？
实际开发富文本组件中也许第一时间大家会想到使用input、text等标签，这两个标签可以装载文本，但是它却缺少渲染图片与其他标签的能力所以不能采用，那么怎么才能可以在一个标签中渲染其他标签呢？答案是使用容器标签div,对其设置contenteditable="true"，就可以实现图片与其他媒体插入了。

<div id="mediaedit" class="write-content" contenteditable="true" @mouseup="selectText()"></div>
//获取编辑文本
var mediaedit = document.getElementById("mediaedit");
            mediaedit.addEventListener(
                "DOMSubtreeModified",
                function(evt) {
                    that.text = mediaedit.innerHTML;

                },
                false
);
//获取选中内容
selectText: function() {
                if (document.Selection) {
                    //ie浏览器
                    this.desc = document.selection.createRange().text;
                } else {
                    //标准浏览器
                    this.desc = window.getSelection().toString();
                }
}

在contenteditable属性下，如果我们敲击回车换行，系统会自动在后面拼接<div>
</div>产生换行功能，所以在富文本编辑时需要通过匹配<div>
</div>来实现文本转换。
关于实现富文本编辑示例：VUE自定义富文本编辑器

结语

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

Markdown-富文本转换(1)