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

目录

介绍

准备

目标

规定

思路

补充知识

解法参考

介绍

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/flags。pattern 是你要匹配的模式，flags 是标志，可以是 i（忽略大小写）、g（全局匹配）、m（多行匹配）等。

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

3.字符类：使用方括号 [ ] 来定义一个字符类，代表匹配其中任何一个字符。比如 [abc] 表示匹配字符 a、b 或 c。

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.mzph.cn/news/207906.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Element-ui】Icon 图标与Button 按钮

【Element-ui】Icon 图标与Button 按钮

文章目录 前言一、Icon 图标1.1 作用1.2 使用方法1.3 图标集合 二、Button 按钮2.1 基础用法2.2 禁用状态2.3 文字按钮2.4 图标按钮2.5 按钮组2.6 加载中2.7 不同尺寸 总结 前言 在前端开发中&#xff0c;界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开…
阅读更多...
js写旋转的时钟动态

js写旋转的时钟动态

目录 1、css代码 2.html代码 3.js代码 1、css代码 .box {position: relative;width: 600px;height: 600px;background: url(./images/clock.jpg) no-repeat center;}.hour,.minute,.second {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.hour {background…
阅读更多...
上个月暴涨34.6%后，SoundHound AI股票现在还能买入吗？

上个月暴涨34.6%后，SoundHound AI股票现在还能买入吗？

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 揭开SoundHound AI股价波动的原因 S&P Global Market Intelligence的数据显示&#xff0c;在摆脱了10月份的大幅下跌后&#xff0c;SoundHound AI的股价在11月份实现了34.6%的涨幅。 原因是该公司公布了稳健的第三季…
阅读更多...
英文论文查重复率网址

英文论文查重复率网址

大家好&#xff0c;今天来聊聊英文论文查重复率网址&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 英文论文查重复率网址 在撰写英文论文时&#xff0c;查重是确保论文原创性和质量的重要环节快码论文…
阅读更多...
国产化， 海量数据库 VastbaseG100 兼容适配

国产化， 海量数据库 VastbaseG100 兼容适配

背景&#xff1a; 客户是国内某家电龙头企业&#xff0c;应国产化政策要求&#xff0c; 系统需要适配国产数据库&#xff0c; Vastbase G100 遇到问题&#xff1a; 1. 数据库连接&#xff1a; Vastbase 是基于 postgresql 进行封装&#xff0c; 所以理论上是兼容的&#…
阅读更多...
Efficient physics-informed neural networks using hash encoding

Efficient physics-informed neural networks using hash encoding

论文阅读&#xff1a;Efficient physics-informed neural networks using hash encoding Efficient physics-informed neural networks using hash encoding简介方法PINN哈希编码具有哈希编码的 PINN 实验Burgers 方程Helmholtz 方程N-S 方程训练效率对比 总结 Efficient physi…
阅读更多...
06 JQuery调用接口

06 JQuery调用接口

文章目录 一、Qs.js库介绍1. Qs简介2. Qs.parse3. Qs.stringify 二、jQuery调用接口1. 增加&#xff08;Create&#xff09;2. 删除&#xff08;Delete&#xff09;3. 读取&#xff08;Read&#xff09;4. 更新&#xff08;Update&#xff09; 三、示例 一、Qs.js库介绍 1. Qs…
阅读更多...
代码随想录算法训练营 --- 第五十九天

代码随想录算法训练营 --- 第五十九天

今天同样是单调栈&#xff0c;第二题很重要。 第一题&#xff1a; 简介&#xff1a; 本题可以说和上一题很是相似&#xff0c;只是有一点不同&#xff0c;数组是循环的。本题有两种巧妙地解法&#xff0c;都不难。 第一种方法&#xff08;也是第一个想出来的方法&#xff09…
阅读更多...
我的acer电脑U盘装系统前BIOS设置及装系统过程中的操作

我的acer电脑U盘装系统前BIOS设置及装系统过程中的操作

1、开机长按F2进入BIOS设置 2、使能F12 3、调整boot顺序&#xff0c;使USB启动的优先级最高 4、按F10保存退出 5、插入U盘开机&#xff0c;boot选择界面无需操作&#xff0c;等待几秒&#xff0c;默认进入U盘系统 由于既使能了F12&#xff0c;又将U盘的优先级进调整到了最高&…
阅读更多...
OpenVINS学习1——数据集配置与运行

OpenVINS学习1——数据集配置与运行

前言 OpenVINS是基于MSCKF的开源VIO算法&#xff0c;有非常详细的官网文档可以学习使用&#xff0c;将来一段时间的主要实践工作&#xff0c;就是深度掌握这份开源代码。 https://docs.openvins.com/ 一、环境配置与Euroc数据集运行 我的环境是Ubuntu20.04&#xff0c;ROS1&a…
阅读更多...
vue3中实现el-tree通过ctrl或shift批量选择节点并高亮展示

vue3中实现el-tree通过ctrl或shift批量选择节点并高亮展示

一、看效果&#xff1a; 按住ctrl键实现单个多选 按住shift实现区间范围多选 二、代码&#xff1a; vue页面 <template><el-treeclass"w100%":data"$.treeData"ref"treeTab…
阅读更多...
Unity中Batching优化的静态合批

Unity中Batching优化的静态合批

文章目录 前言一、静态合批的规则1、模型使用同一个材质2、勾选静态合批3、对于静态合批后的Mesh顶点总数&#xff0c;不超过2^16^即可以使用同一批次&#xff0c;超过则会开启一个新的批次4、对与使用同一材质的不同模型间&#xff0c;纹理贴图的问题&#xff0c;我们可以通过…
阅读更多...
数据可视化工具选择：功能、易用性与安全性

数据可视化工具选择：功能、易用性与安全性

作为一名数据可视化大屏设计师&#xff0c;我深知选择一款合适的数据可视化工具对于提高工作效率和呈现效果的重要性。下面&#xff0c;我将从真正对我们数据可视化大屏设计师有用的角度为大家介绍选择数据可视化工具的一些必要条件和要求。 1. 功能强大与灵活定制 首先&…
阅读更多...
如何做好口译服务，同传和交传哪个服务好

如何做好口译服务，同传和交传哪个服务好

随着中国经济的蓬勃发展和综合实力的不断增强&#xff0c;中国与世界各国的交流也日益频繁。口译作为对外交流的桥梁与纽带&#xff0c;需求量与日俱增&#xff0c;其重要性不言而喻。那么&#xff0c;如何做好口译服务呢&#xff1f;是同传还是交传更好呢&#xff1f; 业内专家…
阅读更多...
机器人纯阻抗控制接触刚性环境

机器人纯阻抗控制接触刚性环境

问题描述 在机器人学中&#xff0c;阻抗控制是一种常用的控制策略&#xff0c;用于管理机器人在与环境交互时的运动和力。阻抗控制背后的关键概念是将环境视为导纳&#xff0c;而将机器人视为阻抗。 纯阻抗控制接触刚性环境时&#xff0c;机器人的行为方式主要受其阻抗参数的…
阅读更多...
表单小程序作用体现在哪

表单小程序作用体现在哪

表单的用途非常广泛&#xff0c;它是线上收集信息或用户预约/需求服务的重要方式&#xff0c;对商家来说如今线上平台非常多&#xff0c;生意开展的形式也越来越多&#xff0c;比如常见的预约、报名、收款、产品支付等都可以通过表单实现。 接下来啊让我们看看通过【雨科】平台…
阅读更多...
解决：During handling of the above exception, another exception occurred

解决：During handling of the above exception, another exception occurred

解决&#xff1a;During handling of the above exception, another exception occurred 文章目录 解决&#xff1a;During handling of the above exception, another exception occurred背景报错问题报错翻译报错位置代码报错原因解决方法参考内容&#xff1a;今天的分享就到…
阅读更多...
numpy数据读取保存及速度测试

numpy数据读取保存及速度测试

目录 数据保存及读取 速度比对测试 数据保存及读取 代码示例&#xff1a; # 导入必要的库 import numpy as np # 生成测试数据 arr_disk np.arange(8) # 打印生成能的数据 print(arr_disk) # numpy保存数据到本地 np.save("arr_disk", arr_disk) # 加载本地数据…
阅读更多...
排序算法-插入/希尔排序

排序算法-插入/希尔排序

1 插入排序 1.1基本思想&#xff1a; 直接插入排序是一种简单的插入排序法&#xff0c;其基本思想是&#xff1a;把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列 。 1.2直…
阅读更多...
【js】js实现多个视频连续播放：

【js】js实现多个视频连续播放：

文章目录 一、效果&#xff1a;二、实现&#xff1a; 一、效果&#xff1a; 二、实现&#xff1a; <!DOCTYPE html> <html> <head><title>Video Player</title><style>#progressBar { width: 800px;height: 20px;background-color: #dd…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023