溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript如何實(shí)現(xiàn)簡(jiǎn)單的Markdown語(yǔ)法解析器

發(fā)布時(shí)間：2023-03-22 11:18:18 來(lái)源：億速云 閱讀：185 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“JavaScript如何實(shí)現(xiàn)簡(jiǎn)單的Markdown語(yǔ)法解析器”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JavaScript如何實(shí)現(xiàn)簡(jiǎn)單的Markdown語(yǔ)法解析器”吧!

什么是markdown

Markdown 是一種輕量級(jí)標(biāo)記語(yǔ)言，創(chuàng)始人為約翰·格魯伯（John Gruber）。 它允許人們使用易讀易寫(xiě)的純文本格式編寫(xiě)文檔，然后轉(zhuǎn)換成有效的 XHTML（或者HTML）文檔。這種語(yǔ)言吸收了很多在電子郵件中已有的純文本標(biāo)記的特性。

由于 Markdown 的輕量化、易讀易寫(xiě)特性，并且對(duì)于圖片，圖表、數(shù)學(xué)式都有支持，許多網(wǎng)站都廣泛使用 Markdown 來(lái)撰寫(xiě)幫助文檔或是用于論壇上發(fā)表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡(jiǎn)書(shū)等，甚至還能被使用來(lái)撰寫(xiě)電子書(shū)?，F(xiàn)在我們所看的 segmentfault 的編輯器也是支持markdown語(yǔ)法的！

上代碼

</!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>

<h4 >JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的MarkDown語(yǔ)法解析器</h4>
<div id="app">
    
    <div class="md-editor">
        <form>
            <textarea name="md-content" class="md-content" placeholder="在這里使用markdown語(yǔ)法編寫(xiě)"></textarea>
        </form>
    </div>
    <div class="md-html">這里會(huì)實(shí)時(shí)顯示markdown語(yǔ)法的解析結(jié)果</div>
</div>

<script type="text/javascript">

// 解析markdown語(yǔ)法為html
function markdownToHTML(markdownContent) {

  // 處理標(biāo)題
  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(/^######\s(.*)$/gm, '<h7>$1</h7>');

  // 處理加粗、斜體、刪除線
  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">');

  // 處理行內(nèi)代碼和代碼塊
  markdownContent = markdownContent.replace(/`(.*?)`/gm, '<code>$1</code>');
  markdownContent = markdownContent.replace(/```([\s\S]*?)```/gm, '<pre>$1</pre>');

  // 處理?yè)Q行
  markdownContent = markdownContent.replace(/\n/g, "<br>");

  return markdownContent;
}

// 實(shí)時(shí)解析markdown語(yǔ)法
$("#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>

實(shí)現(xiàn)原理

實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單，就是通過(guò)正則替換預(yù)定的字符來(lái)實(shí)現(xiàn)HTML的輸出。

demo

JavaScript如何實(shí)現(xiàn)簡(jiǎn)單的Markdown語(yǔ)法解析器

到此，相信大家對(duì)“JavaScript如何實(shí)現(xiàn)簡(jiǎn)單的Markdown語(yǔ)法解析器”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手