扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现简单的Markdown语法解析器
  • 888

0
分享到

JavaScript实现简单的Markdown语法解析器

JavaScriptMarkdown语法解析器JavaScriptMarkdown语法解析JavaScriptMarkdown解析JavaScriptMarkdown 2023-03-22 17:03:52 888人浏览 泡泡鱼
摘要

目录什么是markdown上代码实现原理demo什么是markdown Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）

什么是markdown

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 Xhtml（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。现在我们所看的 segmentfault 的编辑器也是支持markdown语法的！

上代码

</!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/Jquery/3.6.1/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            font-family: system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
        }
        #app{
            width: 810px;
            height: 400px;
            margin: 30px auto 0;
            padding: 20px 20px;
            background: #00965e;
        }
        #app .md-editor{
            width: 400px;
            height: 400px;
            float: left;
        }
        #app .md-content{
            width: 100%;
            height: 400px;
            outline: none;
            resize: none;
            padding: 10px 10px;
            font-size: 17px;
            border: none;
            background: #eee;
        }
        #app .md-html{
            width: 400px;
            height: 400px;
            float: right;
            background: #eee;
        }
        #app code{
            color: #666;
            padding: 2px 5px;
            background: #fff;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>

<h3 style="text-align: center;margin-top: 100px;">javascript实现一个简单的MarkDown语法解析器</h3>
<div id="app">
    
    <div class="md-editor">
        <fORM>
            <textarea name="md-content" class="md-content" placeholder="在这里使用markdown语法编写"></textarea>
        </form>
    </div>
    <div class="md-html">这里会实时显示markdown语法的解析结果</div>
</div>

<script type="text/javascript">

// 解析markdown语法为html
function markdownToHTML(markdownContent) {

  // 处理标题
  markdownContent = markdownContent.replace(/^#\s(.*)$/gm, '<h1>$1</h1>');
  markdownContent = markdownContent.replace(/^##\s(.*)$/gm, '<h2>$1</h2>');
  markdownContent = markdownContent.replace(/^###\s(.*)$/gm, '<h3>$1</h3>');
  markdownContent = markdownContent.replace(/^####\s(.*)$/gm, '<h4>$1</h4>');
  markdownContent = markdownContent.replace(/^#####\s(.*)$/gm, '<h5>$1</h5>');
  markdownContent = markdownContent.replace(/^######\s(.*)$/gm, '<h6>$1</h6>');

  // 处理加粗、斜体、删除线
  markdownContent = markdownContent.replace(/\*\*(.*)\*\*/gm, '<strong>$1</strong>');
  markdownContent = markdownContent.replace(/__(.*)__/gm, '<strong>$1</strong>');
  markdownContent = markdownContent.replace(/\*(.*)\*/gm, '<em>$1</em>');
  markdownContent = markdownContent.replace(/_(.*)_/gm, '<em>$1</em>');
  markdownContent = markdownContent.replace(/~~(.*)~~/gm, '<del>$1</del>');

  // 处理链接和图片
  markdownContent = markdownContent.replace(/\[(.*?)\]\((.*?)\)/gm, '<a href="$2" rel="external nofollow" >$1</a>');
  markdownContent = markdownContent.replace(/!\[(.*?)\]\((.*?)\)/gm, '<img src="$2" alt="$1">');

  // 处理行内代码和代码块
  markdownContent = markdownContent.replace(/`(.*?)`/gm, '<code>$1</code>');
  markdownContent = markdownContent.replace(/```([\s\S]*?)```/gm, '<pre>$1</pre>');

  // 处理换行
  markdownContent = markdownContent.replace(/\n/g, "<br>");

  return markdownContent;
}

// 实时解析markdown语法
$("#app .md-editor .md-content").bind("input propertychange",function(event){

    let md_content = $('#app .md-editor .md-content').val();
    $('#app .md-html').html(markdownToHTML(md_content));
});


</script>
</body>
</html>

实现原理

实现起来非常简单，就是通过正则替换预定的字符来实现HTML的输出。

demo

到此这篇关于JavaScript实现简单的Markdown语法解析器的文章就介绍到这了,更多相关JavaScript Markdown语法解析器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript实现简单的Markdown语法解析器

本文链接: https://lsjlt.com/news/200832.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现简单的Markdown语法解析器
    目录什么是markdown上代码实现原理demo什么是markdown Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）...
    99+
    2023-03-22
    JavaScript Markdown语法解析器 JavaScript Markdown语法解析 JavaScript Markdown解析 JavaScript Markdown
  • JavaScript如何实现简单的Markdown语法解析器
    本篇内容主要讲解“JavaScript如何实现简单的Markdown语法解析器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript如何实现简单的Markdown语法解析器”吧!什么...
    99+
    2023-07-05
  • 详解JavaScript实现简单的词法分析器示例
    目录正文什么是词法分析器？实现一个简单的词法分析器总结正文 词法分析是编译器的一项重要工作，其目的是将源代码转换成单个单词（token）的序列，方便后续语法分析器（parser）对...
    99+
    2023-03-10
    JavaScript词法分析器 JavaScript 分析器
  • JavaScript如何实现简单的词法分析器
    这篇文章主要介绍了JavaScript如何实现简单的词法分析器的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现简单的词法分析器文章都会有所收获，下面我们一起来看看吧。什么是词法分析器？...
    99+
    2023-07-05
  • JavaScript实现简单计时器
    本文实例为大家分享了JavaScript实现简单计时器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"&g...
    99+
    2024-04-02
  • 用javascript实现简单计算器
    本文实例为大家分享了javascript实现简单计算器的具体代码，供大家参考，具体内容如下 设计一个简单的计算器 代码 <body> <a>第一个...
    99+
    2024-04-02
  • JavaScript实现简单的计算器功能
    本文实例为大家分享了JavaScript实现简单计算器功能的具体代码，供大家参考，具体内容如下 具体要求如下： 实现代码： <html> <head>...
    99+
    2024-04-02
  • React框架快速实现简易的Markdown编辑器
    目录前言需要实现的功能具体实现一、布局二、markdown语法解析三、markdown主题样式四、代码块高亮五、同步滚动bug1：bug2：六、工具栏七、补充八、最后前言 最近我在项...
    99+
    2024-04-02
  • JavaScript实现简单五子棋游戏的方法
    本篇内容介绍了“JavaScript实现简单五子棋游戏的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！本文实例为大家分享了JavaScr...
    99+
    2023-06-20
  • JavaScript模拟实现简单的MVC的示例详解
    目录场景核心思想initControllerViewModelMVC是一种常见的软件架构模式，将一个应用程序分为三个核心的部分:模型（Model）、视图（View）和控制器（Cont...
    99+
    2023-05-15
    JavaScript实现MVC JavaScript MVC
  • Java实现一个简单的定时器代码解析
    定时的功能我们在手机上见得比较多,比如定时清理垃圾,闹钟,等等.定时功能在java中主要使用的就是Timer对象,他在内部使用的就是多线程的技术.Time类主要负责完成定时计划任务的功能,就是在指定的时间的开始执行某个任务.Timer类的作...
    99+
    2023-05-30
    java 定时器 ava
  • JavaScript实现简单的拖拽效果
    本文实例为大家分享了JavaScript实现简单的拖拽效果的具体代码，供大家参考，具体内容如下 1.先搭架子： * { margin: 0; ...
    99+
    2024-04-02
  • JavaScript实现简单网页版计算器
    背景 由于我又被分进了一个新的项目组，该项目需要用js，因为我没接触过，所以领导准备给我一周时间学习，没错，实现一个简单的支持四则混合运算的计算器就是作业，所以有了这篇文章 故，这篇...
    99+
    2024-04-02
  • JavaScript实现简单计算器小功能
    本文实例为大家分享了JavaScript实现简单计算器的具体代码，供大家参考，具体内容如下 此例为简单的计算器： 代码示例： <!DOCTYPE html> <h...
    99+
    2024-04-02
  • JavaScript实现简单计算器小程序
    本文实例为大家分享了JavaScript实现简单计算器的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html> <h...
    99+
    2024-04-02
  • C语言实现简单计算器
    本文实例为大家分享了C语言实现简单计算器的具体代码，供大家参考，具体内容如下 实现效果如图: 实现代码如下： #include<stdio.h> #include...
    99+
    2024-04-02
  • JavaScript实现单链表过程解析
    前言： 要存储多个元素，数组是最常用的数据结构，但是数组也有很多缺点： 数组的创建通常要申请一段连续的内存空间，并且大小是固定的，所以当当前数组不能满足容量需求时，需要进行扩容，（一...
    99+
    2024-04-02
  • Matlab实现简单扩频语音水印算法详解
    目录一、实验背景1.实验目的2.实验环境3.原理简介二、基础知识1.PN序列2.时域到频域变换的原因3.三种时域到频域变换的区别三、算法源码1.PN产生函数2.隐藏算法3.提取算法4...
    99+
    2024-04-02
  • 使用Javascript如何实现简单计算器
    小编给大家分享一下使用Javascript如何实现简单计算器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下1.htm...
    99+
    2024-04-02
  • Go 语言简单实现Vigenere加密算法
    目录Vigenere 加密算法Go 代码Vigenere 加密算法 该密码由意大利密码学家 Giovan Battista Bellaso 于 1553 年发明，但几个世纪以来一直归...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作