[ 蓝桥杯Web真题 ]-Markdown 文档解析

news/2024/2/28 18:13:18

目录

介绍

准备

目标

规定

思路

补充知识

解法参考


介绍

Markdown 因为其简洁的语法大受欢迎,已经成为大家写博客或文档时必备的技能点,众多博客平台都提倡用户使用 Markdown 语法进行文章书写,然后再发布后,实时的将其转化为常规的 HTML 页面渲染。

本题需要在已提供的基础项目中,使用 Nodejs 实现简易的 Markdown 文档解析器。

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

├── docs.md
├── images
│   └── md.jpg
├── index.html
└── js├── index.js└── parse.js

其中:

  • index.html 是主页面。
  • images 是图片文件夹。
  • docs.md 是需要解析的 Markdown 文件。
  • js/index.js 是提供的工具脚本,用于快速验证代码结果。
  • js/parse.js 是需要补充的脚本文件。

注意:打开环境后发现缺少项目代码,请手动键入下述命令进行下载:

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18213/07.zip && unzip 07.zip && rm 07.zip

目标

在 js/parse.js 中实现几种特定的 Markdown 语法解析,目前初始文件中已实现标题解析(即从 # 前缀转换为 <hn> 标签),请你继续完善该文件 TODO 部分,完成剩余语法解析操作,具体需求如下:

1.对分隔符进行解析,Markdown 中使用 --- (三条及以上的短横线) 作为分隔符,将其解析成为 <hr> 标签:

<!-- Markdown -->
----<!-- 对应 HTML  -->
<hr>

2.对引用区块进行解析,Markdown 中使用 > 作为前缀,将其解析成为 <blockquote> 标签:

<!-- Markdown  -->
> 引用区块1> 多级引用区块2
> 多级引用区块2<!-- 对应 HTML  -->
<blockquote><p>引用区块1</p>
</blockquote><blockquote><p>多级引用区块2</p><p>多级引用区块2</p>
</blockquote>

3.对无序列表进行解析,Markdown 中使用 * 或者 - 作为前缀,将其解析成为 <ul> 标签:

<!-- Markdown  -->
* 无序列表
* 无序列表
* 无序列表或者:
- 无序列表
- 无序列表
- 无序列表<!-- 对应 HTML  -->
<ul><li>无序列表</li><li>无序列表</li><li>无序列表</li>
</ul>

4.对图片进行解析,Markdown 中使用 ![alt](link) 表示,将其解析成为 <img> 标签:

<!-- Markdown  -->
![图片](./images/md.jpg)<!-- 对应 HTML  -->
<img src="./images/md.jpg" alt="图片">

5.对文字效果进行解析,比如粗体效果,和行内代码块,将其分别解析成 <b> 和 code 标签:

<!-- Markdown  -->
这是**粗体**的效果文字,这是内嵌的`代码行`<!-- 对应 HTML  -->
这是<b>粗体</b>的效果文字,这是内嵌的<code>代码行</code>

在验证代码效果时,你可以在终端运行:

node ./js/index.js

程序会将解析的结果输出到 index.html 文件中,然后通过浏览器查看输出的 index.html 是否符合解析要求(注意:程序不会实时的将结果更新到 index.html 文件中,在你的代码变更后,请重新执行上述命令)。

在题目所提供的数据的情况下,完成后的效果如下:

规定

  • 请勿修改 js/parse.js 文件外的任何内容。
  • 请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等,以免造成无法判题通过。自己先做以下把,传送门

思路

本道题在14届省赛中是倒数第二道题目,还是有一定的难度的。本文的题目表示考查的点是Node.js。但是在做这道题目我们压根就不需要使用到Node.js的知识点,因此这部分的功能题目源码都已经帮我们写好了。它主要是使用到了Node.js中的fs模块来读取md文件,后续对其进行读取到的文本内容通过解析之后渲染到了html文档中。如果对Node.js感兴趣的小伙伴可以看我之前发布的文章。一共6篇,还有一篇案例。

这道题主要是给我们一些规则,让我们通过对应的规则去将代码进行转换。做这道题目首先自己需要对正则有一点的了解。然后需要对字符串或者数组的一些方法熟悉,才能方便处理。同时还需要你会观察上下文的代码,通过它已经提供的代码来对其进行理解,然后编写出自己的代码。

补充知识

JavaScript中的正则表达式(正则规则)是用于匹配字符串模式的工具。它们提供了强大的方式来搜索、替换或提取字符串中的特定部分。以下是一些常见的JS正则表达式规则:

1.字面量表示法:使用斜杠(/)来包裹正则表达式模式,例如:/pattern/flagspattern 是你要匹配的模式,flags 是标志,可以是 i(忽略大小写)、g(全局匹配)、m(多行匹配)等。

2.元字符:元字符是在正则表达式中具有特殊含义的字符,如 ^(匹配开头)、$(匹配结尾)、.(匹配除换行符外的任何字符)、*(匹配前一个元素零次或多次)等。

3.字符类:使用方括号 [ ] 来定义一个字符类,代表匹配其中任何一个字符。比如 [abc] 表示匹配字符 abc

4.量词:量词用于指定匹配元素的数量。常见的量词包括 *(零次或多次匹配)、+(一次或多次匹配)、?(零次或一次匹配)、{n}(匹配 n 次)、{n,}(至少匹配 n 次)、{n,m}(匹配 n 到 m 次)等。

5.捕获组:使用括号 () 可以创建一个捕获组,用于匹配子表达式,并可以在后续操作中引用它。

6.特殊字符转义:在正则表达式中,有些字符具有特殊含义,如果想要匹配这些字符本身,需要使用反斜杠 \ 进行转义,比如 \. 可以匹配 . 字符。

7.预定义模式:如 \d(匹配数字字符)、\w(匹配字母、数字或下划线)、\s(匹配空白字符)等,它们表示常见的字符集合。

8.修饰符:修饰符用于指定匹配规则的标志,比如 i(不区分大小写)、g(全局匹配)、m(多行匹配)等。

匹配数字

const pattern = /\d+/;
console.log(pattern.test("Hello 123")); // 输出 true,匹配到数字
console.log(pattern.test("Hello World")); // 输出 false,未匹配到数字

匹配邮箱

const emailPattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
console.log(emailPattern.test("example@mail.com")); // 输出 true,匹配邮箱格式
console.log(emailPattern.test("invalid_email.com")); // 输出 false,不匹配邮箱格式

提取字符串中的数字

const str = "Age: 25, Height: 180cm";
const numberPattern = /\d+/g;
const numbers = str.match(numberPattern);
console.log(numbers); // 输出 ["25", "180"]

替换字符串中的特定内容

const sentence = "Learn JavaScript, it's JavaScript";
const replacePattern = /JavaScript/g;
const replaced = sentence.replace(replacePattern, "JS");
console.log(replaced); // 输出 "Learn JS, it's JS"

检查字符串是否以特定模式开头

const startsWithPattern = /^Start/;
console.log(startsWithPattern.test("Starts with Start")); // 输出 true
console.log(startsWithPattern.test("Does not start")); // 输出 false

解法参考

首先我们需要对分隔符来进行解析。我们先写出其对应的正则表达式,Markdown 中使用 --- (三条及以上的短横线) 作为分隔符。使用正则表示为:this.hr = /-{3,}/。接着我们判断是否符合分隔符,并且对其进行转化函数的编写。

  //是否符合分隔符规范isHr(){return this.hr.test(this.lineText);}//解析分隔符parseHr(){return `<hr>`;}

然后在渲染类的 runParser()中编写对应的渲染处理。这部分我们跟上面提供的代码的标题函数一样即可。

 // 分割线渲染if (this.parser.isHr()) {hasParsed.push(this.parser.parseHr());currentLine++;continue;}

接着我们对引用区块进行解析,同样对其进行判断以及解析。这部分的解析我们分为三个方法,开始标签,中间p标签以及结束标签的解析

  // 解析blockQuote开始标签parseStartBlockQuote(){return `<blockquote>`;}// 解析blockQuote结束标签parseEndBlockQuote(){return `</blockquote>`;}

接着我们解析中间的文字,我们使用到了split方法来进行获取到的那一行文字通过>符号来进行分割成字符串数组,如下。接着我们获取下标为1的元素,并使用trim()用于去除字符串中的空格。最后将这部分获取到的文字包裹来一个p标签中。

[ '', ' hello world' ]
[ '', ' 这是区块引用' ]
[ '', ' 和上面的文字在同一个区块' ]
  // 生成blockQuote中的p标签parseBlockQuoteP(){//split将一个字符串分割成字符串数组const temp = this.lineText.split(">");//trim()用于去除字符串中的空格console.log(temp)const content = temp[1].trim();// console.log(content)return `<p>${content}</p>`;}

接下来我们对引用区块进行渲染,首先若匹配到 < 标签我们就先为其加上一个块级的开始标签,同时也加上中间文字的解析,然后我们通过循环,来对现在的currentLine不断往下,然后获取对应的行文本内容,判断若匹配不到 < 标签,我们就为其添加一个块级的结束标签。

      // 块作用区渲染if (this.parser.isBlockQuote()){hasParsed.push(this.parser.parseStartBlockQuote())while(true){ hasParsed.push(this.parser.parseBlockQuoteP())currentLine++;this.parser.parseLineText(this.getLineText(currentLine));if(!this.parser.isBlockQuote()){hasParsed.push(this.parser.parseEndBlockQuote())break}}continue;}

接下来的无序列表进行解析为块级作用域的解析思路是一样的。这里就不做过多的解释。

//是否为无序列表isUnorderedList(){return this.unorderedList.test(this.lineText);}// // 解析unorderedList开始标签parseStartUnorderedList(){return `<ul>`;}// 解析unorderedList结束标签parseEndUnorderedList(){return `</ul>`;}// 生成unorderedList中的li标签parseUnorderedListLi(){//split将一个字符串分割成字符串数组const temp = this.lineText.split(" ");//trim()用于去除字符串中的空格const content = temp[1].trim();// console.log(content)return `<li>${content}</li>`;}
  //无序列表渲染if (this.parser.isUnorderedList()){hasParsed.push(this.parser.parseStartUnorderedList())while(true){ hasParsed.push(this.parser.parseUnorderedListLi())currentLine++;this.parser.parseLineText(this.getLineText(currentLine));if(!this.parser.isUnorderedList()){hasParsed.push(this.parser.parseEndUnorderedList())break}}continue;}

接着我们对图片进行解析,Markdown 中使用 ![alt](link) 表示,将其解析成为 <img> 标签。这部分也比较简单使用到了slice方法来进行截取对应的图片的路径已经alt属性的值。slice方法我们在第一篇真题讲解中有介绍了,可以去看看。

  //是否为图片isImage(){return this.image.test(this.lineText);}// 解析image标签parseImage(){const src=this.lineText.slice(6,-1);const alt=this.lineText.slice(2,4);return `<img src="${src}" alt="${alt}">`;}
 //图片渲染if(this.parser.isImage()){hasParsed.push(this.parser.parseImage());currentLine++;continue;}

最后,我们需要对文字效果进行解析,比如粗体效果,和行内代码块,将其分别解析成<b>和code标签。this.strongText 是一个匹配粗体文本的正则表达式。replace 方法会将匹配到的粗体文本替换成函数中返回的内容。参数 match 包含了整个匹配的字符串,而 p1 则是捕获组中捕获到的内容,也就是粗体文本的实际内容。若遇到粗体以及代码块的标识则解析成对应的格式,否则对正常文字进行正常解析。

 //解析文本parseText(){let temp=this.lineText;//若有粗体则对其进行添加标签temp=temp.replace(this.strongText,(match,p1)=>{return `<b>${p1}</b>`;})//若遇到代码块则对其进行添加标签temp=temp.replace(this.codeLine,(match,p1)=>{return `<code>${p1}</code>`;})return temp;};
  //渲染文本hasParsed.push(this.parser.parseText());currentLine++;continue;

好啦!本文就到这里结束了~~~


http://www.ppmy.cn/news/1263564.html

相关文章

ffmpeg编解码——时间基(time base)概念

文章目录 FFmpeg 编解码——时间基&#xff08;Time Base&#xff09;概念1. 时间基&#xff08;Time Base&#xff09;概念1.1 定义与作用1.2 表现形式 2. 时间基在FFmpeg中的应用2.1 时间戳2.2 持续时间 3. 理解FFmpeg中的时间基转换3.1 av_rescale_q 函数3.2 av_rescale_q_r…

solidity案例详解(六)服务评价合约

有服务提供商和用户两类实体&#xff0c;其中服务提供商部署合约&#xff0c;默认诚信为true&#xff0c;用户负责使用智能合约接受服务及评价&#xff0c;服务提供商的评价信息存储在一个映射中&#xff0c;可以根据服务提 供商的地址来查找评价信息。用户评价信息&#xff0c…

Spring Boot 在启动之前还做了哪些准备工作?

目录 一:初始化资源加载器 二:校验主要源 三:设置主要源 四:推断 Web 应用类型<

数据结构:位图、布隆过滤器以及海量数据面试题

位图、布隆过滤器以及海量数据面试题 1.位图1.1概念1.2实现1.3位图应用 2.布隆过滤器2.1布隆过滤器的提出2.2布隆过滤器的概念2.3布隆过滤器的查找2.4布隆过滤器的实现2.5布隆过滤器的删除2.6布隆过滤器的优点2.7布隆过滤器的缺点 3.海量数据面试题3.1哈希切分3.2位图应用3.3布…

useradd 在Linux原生应用开发过程中的简单应用

useradd命令是用于在Linux系统中创建新用户的命令。它可以创建一个新用户&#xff0c;并设置该用户的属性、家目录、默认shell等。useradd命令实际上是一个包装了一系列系统调用的高级命令。 在Linux系统中&#xff0c;用户信息存储在/etc/passwd文件中。当执行useradd命令时&…

多人聊天

服务端 import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{public static ServerSocket server_socket;public static ArrayList<Socket> socketListnew ArrayList<Socket>(); public static void main(String []args){try…

在AWS Lambda上部署EC2编译的FFmpeg工具——自定义层的方案

大纲 1 确定Lambda运行时环境1.1 Lambda系统、镜像、内核版本1.2 运行时1.2.1 Python1.2.2 Java 2 环境准备2.1 创建EC2实例 3 编译FFmpeg3.1 连接EC2 4 编译5 上传S3存储桶5.1 创建S3桶5.2 创建IAM策略5.3 创建IAM角色5.4 EC2关联角色5.5 修改桶策略5.6 打包并上传 6 创建Lamb…

Git版本管理配置说明 - Visual Studio

一、 Git服务端配置 在源代码管理服务器新建文件夹,并配置共享访问权限Everyone(读取/写入)。 在本地访问这台服务器共享目录,确保正确打开。 在VS中打开项目,点选Git更改,点击“创建Git仓库”,创建项目初始版本。 弹出如下对话框: 因为我们只是在局域网中开发项…

HSQL 记录

DDL hiveDDL官方文档 -- 显示当前hive中有多少函数可用 SHOW FUNCTIONS [LIKE "<pattern>"]; -- 显示函数的描述信息 desc function concat;-- 显示函数的扩展描述信息 desc function extended concat;SHOW LOCKS <table_name>; SHOW LOCKS <table_n…

异常追踪与 JIRA 实现双向联动

前言 当应用程序或系统出现异常时&#xff0c;通常需要及时处理以保证系统的正常运行。通过异常追踪与 JIRA 双向联动&#xff0c;可以让企业内部相关人员快速了解、分析问题故障发生的原因、追溯并记录故障的处理过程&#xff0c;有效提高人员的沟通效率&#xff0c;极大降低…

104. 二叉树的最大深度(Java)

目录 解法&#xff1a; 官方解答&#xff1a; 方法一&#xff1a;深度优先搜索 方法二&#xff1a;广度优先搜索 思路与算法 复杂度分析 时间复杂度&#xff1a; 空间复杂度&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根…

【vim】常用操作

用的时候看看&#xff0c;记太多也没用&#xff0c;下面都是最常用的&#xff0c;更多去查文档vim指令集。 以下均为正常模式下面操作&#xff0c;正在编辑的&#xff0c;先etc一下. 1/拷贝当前行 yy&#xff0c;5yy为拷贝包含当前行往下五行 2/p将拷贝的东西粘贴到当前行下…

多线程(初阶七:阻塞队列和生产者消费者模型)

目录 一、阻塞队列的简单介绍 二、生产者消费者模型 1、举个栗子&#xff1a; 2、引入生产者消费者模型的意义&#xff1a; &#xff08;1&#xff09;解耦合 &#xff08;2&#xff09;削峰填谷 三、模拟实现阻塞队列 1、阻塞队列的简单介绍 2、实现阻塞队列 &#…

Java Web应用小案例 - 实现用户登录功能

文章目录 一、使用纯JSP方式实现用户登录功能&#xff08;一&#xff09;项目概述&#xff08;二&#xff09;实现步骤1、创建Web项目2、创建登录页面 二、使用JSPServlet方式实现用户登录功能三、使用JSPServletDB方式实现用户登录功能 一、使用纯JSP方式实现用户登录功能 &a…

简单实现Spring容器(三) 初始化单例池并完成getBean() createBean()方法

阶段3: (仍需打磨,静态处有小瑕疵) // 1.编写自己的Spring容器,实现扫描包,得到bean的class对象. // 2.扫描将 bean 信息封装到 BeanDefinition对象,并放入到Map.3.初始化单例池并完成getBean() createBean()方法思路: 初始化单例池,也就是如果Bean是单例的就实例化,并放入到…

Xubuntu16.04系统中使用RTL8822CE8821无线网卡

目录 1.确认无线网卡是否安装正确2.安装RTL8822CE的驱动 1.确认无线网卡是否安装正确 无线网卡型号&#xff1a; RTL8822CE 支持802.11 a/b/g/n/ac 查看硬件是否识别到了无线网卡 lspci如果看到如下的关键词&#xff0c;则代表这个设备是被Ubunut看到的 Network controller…

【小米电脑管家】安装使用教程--非小米电脑

安装说明功能体验下载资源 Xiaomi HyperOS发布后&#xff0c;小米妙享电脑端独立版本也走向终点&#xff0c;最新的【小米电脑管家】将会内置妙享实现万物互联。那么本篇文章将分享非小米电脑用户如何绕过设备识别验证安装使用【小米电脑管家】实现万物互联 安装说明 1.解压文…

【人工智能:现代方法】第2章:智能体

1 智能体和环境 智能体&#xff08;agent&#xff09;&#xff1a;通过传感器&#xff08;sensor&#xff09;感知环境&#xff08;environment&#xff09;并通过执行器&#xff08;actuator&#xff09;作用于该环境的事物 感知&#xff08;percept&#xff09;&#xff1a;…

#HarmonyOS:基础语法

基础语法 定义了声明式UI描述&#xff1b; 自定义组件&#xff1b; 动态扩展UI元素的能力&#xff1b; 状态管理 多维度装填管理机制&#xff1b;父子组件间爷孙组件间全局范围内传递跨设备传递只读的单向传递可变的双向传递 渲染控制 UI描述&#xff1a;以声明式的方式来…

Java基础-java.util.Random生成指定区间的随机数

目录 1. 公式2. 导包3. 编写代码4. 输出运行结果 1. 公式 生成[a, b]区间的随机数&#xff1a; random.nextInt((b - a) 1) a 2. 导包 import java.util.Random;3. 编写代码 public class random_demo {public static void main(String[] args) {/** 随机数Random* 需求&am…
最新文章