JavaScript笔记 #08# 用Regex辅助生成文章目录 V2.0
简介
* 用Regex辅助生成文章目录 2.0
* 1、提高了功能的通用性（假定的文章格式更加普遍，即按照h2h3h4分级）
* 2、改善了代码的可读性（稍微牺牲了一点点性能，不过也无关紧要。。）
* 3、略微。。提高了扩展性（只需要重写generateDirectory方法就可以
* 生成自定义目录）
* 缺点：没有处理比较脏的情况，需要人工确保html干净
测试用例
输入：
<h2>你好</h2>
<p>dasjdalsjdlsasjdlsczxcnzxczxczxc00</p>
<h3>dasda</h3>
<h4>23981023812090839dajldjasldjalsjd</h4>
<p>dasdasjdlasjdlasjdlassjdalsdjalsdj</p>
<h4>21023812038129dajldjasldjalsjd</h4>
<p>dasdassjdlasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjddlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasjdlasjdalsdjalsdj</p>
<h3>ddada</h3>
<p>dasdasjdlasjdlasjdlasjdalsdjalsdj</p>
<p>daasjdlasjdlasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasdlasjdalsdjalsdj</p>
<h2>hi</h2>
<h3>dadasdasda</h3>
<p>dasdasjdlasjdljdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdsjdlasjdalsdjalsdj</p>
<p>dasdasjjdlasjdlasjdlasjdalsdjalsdj</p>
<h3>dasasdassaddasda</h3>
<p>dasdasjdlasasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlalasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasjdlasjdlasjdalsdjalsdj</p>
<h2>大家好</h2>
<p>asjdlasjdlaasjdlasjsdjalsdj</p>
<p>dsjdlasjdlasjdldlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasjdalsdjalsdj</p>
输出：
<div id="diy_right_menu">
<h2>索引</h2>
<ul>
<ol><li><a href="#anchor0">你好</a>
<ul><li><a href="#anchor1">dasda</a>
<ul><li><a href="#anchor2">23981023812090839dajldjasldjalsjd</a></li>
<li><a href="#anchor3">21023812038129dajldjasldjalsjd</a></li>
</ul>
</li>
<li><a href="#anchor4">ddada</a></li>
</ul>
</li>
<li><a href="#anchor5">hi</a>
<ul><li><a href="#anchor6">dadasdasda</a></li>
<li><a href="#anchor7">dasasdassaddasda</a></li>
</ul>
</li>
<li><a href="#anchor8">大家好</a></li>
</ol>
</ul>
</div>
<h2><a name="anchor0"></a>你好</h2>
<p>dasjdalsjdlsasjdlsczxcnzxczxczxc00</p>
<h3><a name="anchor1"></a>dasda</h3>
<h4><a name="anchor2"></a>23981023812090839dajldjasldjalsjd</h4>
<p>dasdasjdlasjdlasjdlassjdalsdjalsdj</p>
<h4><a name="anchor3"></a>21023812038129dajldjasldjalsjd</h4>
<p>dasdassjdlasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjddlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasjdlasjdalsdjalsdj</p>
<h3><a name="anchor4"></a>ddada</h3>
<p>dasdasjdlasjdlasjdlasjdalsdjalsdj</p>
<p>daasjdlasjdlasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasdlasjdalsdjalsdj</p>
<h2><a name="anchor5"></a>hi</h2>
<h3><a name="anchor6"></a>dadasdasda</h3>
<p>dasdasjdlasjdljdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdsjdlasjdalsdjalsdj</p>
<p>dasdasjjdlasjdlasjdlasjdalsdjalsdj</p>
<h3><a name="anchor7"></a>dasasdassaddasda</h3>
<p>dasdasjdlasasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlalasjdlasjdlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasjdlasjdlasjdalsdjalsdj</p>
<h2><a name="anchor8"></a>大家好</h2>
<p>asjdlasjdlaasjdlasjsdjalsdj</p>
<p>dsjdlasjdlasjdldlasjdalsdjalsdj</p>
<p>dasdasjdlasjdlasjdalsdjalsdj</p>
代码
追加，偶尔会出现BUG，有序列表与无序列表有时候会乱用。仍需人工检查、修正。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<textarea id="big-textarea" placeholder="paste your origin html text here..." rows="30" cols="150">
</textarea>
<button id="big-button">Generate</button> <script type="text/javascript">
/**
* 用Regex辅助生成文章目录 2.0
* 1、提高了功能的通用性（假定的文章格式更加普遍，即按照h2h3h4分级）
* 2、改善了代码的可读性（稍微牺牲了一点点性能，不过也无关紧要。。。）
* 3、略微。。提高了扩展性（只需要重写generateDirectory方法就可以
* 生成自定义目录）
* 缺点：没有处理比较脏的情况，需要人工确保html干净
*/
let button = document.querySelector('#big-button');
button.addEventListener('click', event => {
let textArea = document.querySelector('#big-textarea');
let inputHtml = textArea.value;
textArea.value = addDirectoryTo(inputHtml);
});
</script> <script type="text/javascript">
/**
* 返回生成目录后的inputHtml
* @param {Object} inputHtml 原始html
*/
function addDirectoryTo(inputHtml) {
// 给h2 h3 h4加上锚点
let modifiedHtml = addAnchorTo(inputHtml);
// 提取h2 h3 h4标题
let titles = extractTitles(inputHtml);
// 利用h2 h3 h4标题生成目录
let directory = generateDirectory(titles);
// 将目录和修改后的html拼接后返回
return directory + modifiedHtml;
}
</script> <script type="text/javascript">
/**
* Title类属性↓
* text：string,存该标题中的文字
* level：Number,标题等级
* subTitles：list,用来存子标题
*/
function Title(h2h3h4) {
/**
* 构造器调用示例：new Title("<h2>二级标题</h2>")
*/
if (h2h3h4 != undefined) {
let extractedInfo = this.patternOfh2h3h4.exec(h2h3h4);
this.text = extractedInfo[2];
this.level = Number(extractedInfo[1]);
this.subTitles = [];
}
} Title.prototype.patternOfh2h3h4 = /<h([234])>([^]+?)<\/h[234]>/;
</script> <script type="text/javascript">
/**
* 返回给h2 h3 h4加上锚点后的html
* @param {Object} inputHtml 原始html
*/
function addAnchorTo(inputHtml) {
let patternOfh2h3h4 = /(<h[234]>)/g;
let indexOfAnchor = 0;
let modifyh2h3h4 = (_, h2h3h4) => {
return `${h2h3h4}<a name="anchor${indexOfAnchor++}"></a>`;
};
let modifiedHtml = inputHtml.replace(patternOfh2h3h4, modifyh2h3h4);
return modifiedHtml;
} /**
* 返回包含二级标题对象的list
* @param {Object} inputHtml 原始html
*/
function extractTitles(inputHtml) {
let titles = [];
let patternOfh2h3h4 = /<h[234]>[^]+?<\/h[234]>/g; // 非贪婪匹配
// 遍历正则匹配项
let match;
while (match = patternOfh2h3h4.exec(inputHtml)) {
let title = new Title(match[0]);
properPostion(titles, title.level).push(title);
}
return titles;
} const TOP_LEVEL = 2;
/**
* 返回某个标题的subTitles或者最终的titleList
* 给标题找合适的插入位置，为了不让extractTitles太长才抽象出来的。
* @param {Object} titles
* @param {Object} level 待插入标题的level
*/
function properPostion(titles, level) {
for (let i = TOP_LEVEL; i != level; ++i) {
titles = titles[titles.length - 1].subTitles;
}
return titles;
} /**
* 返回根据标题生成的目录，这个方法可以根据需要自定义
* @param {Object} titles 包含二级标题对象的list
*/
function generateDirectory(titles) {
return generateDiy_right_menu(titles);
} function generateDiy_right_menu(titles) {
let indexOfAnchor = 0;
let divBody = "";
let visitTitle = function(title, first=false) {
if (!first) {
divBody += `<li><a href="#anchor${indexOfAnchor++}">${title.text}</a>`;
}
if (title.subTitles.length != 0) {
if (!first) {
divBody += '\n<ul>';
} else {
divBody += '\n<ol>';
}
for (let i = 0; i != title.subTitles.length; ++i) {
visitTitle(title.subTitles[i]);
}
if (!first) {
divBody += '</ul>\n';
} else {
divBody += '</ol>\n';
}
}
if (!first) {
divBody += '</li>\n';
}
}
let root = new Title(); // 便于遍历titles
root.subTitles = titles;
visitTitle(root, true); let divHead = '<div id="diy_right_menu">\n<h2>索引</h2>\n<ul>\n';
let divTail = '</ul>\n</div>\n';
return divHead + divBody + divTail;
}
</script>
</body> </html>
JavaScript笔记 #08# 用Regex辅助生成文章目录 V2.0的更多相关文章
- JavaScript笔记 #05# 用Regex辅助生成文章目录
PS. 用来生成个人笔记的目录 1.输入:html文本 <h2>Notes</h2> <p>1.小标题1.正文正文正文</p> <div clas ...
- CSDN中根据文章自动生成文章目录
概述 CSDN中有根据文件内容中H标签在文章中自动生成文章目录,看起来比较专业,就想把它搬到自己的博客园中.类似下图 提取JS脚本 通过浏览器开发者工具(IE/Chrome)找到产生文章目录javas ...
- 使用autoc js生成文章目录（侧边）导航栏
介绍: autocjs 是一个专门用来生成文章目录(Table of Contents)导航的工具.autocjs 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的 ...
- WPS生成文章目录
WPS生成文章目录 1.引用–>插入目录...即可!
- 用React实现一个自动生成文章目录的组件
原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...
- javascript笔记08：javascript的if...else语句
案例代码如下: <!DOCTYPE html> <html> <body> <p>点击这个按钮,获得基于时间的问候.</p> <but ...
- HelloDjango 第 11 篇：自动生成文章摘要
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 博客文章的模型有一个 excerpt 字段,这个字段用于存储文章的摘要.目前为止,还只 ...
- 使用office添加文章目录
当我们用word录入完文章,文章里有段落,段落里又有小标题,每一种标题的格式不尽相同,word为我们提供了相当丰富的标题格式,如:正文,无间隔,标题1,标题2,标题3,标题4,副标题,强调,要点... ...
- CSDN添加文章目录
在发表的文章中,系统根据文章中H1到H6标签自动生成文章目录. 一.发表文章的时候合理使用“标题”标签. 二.目录生成.只要在文章中使用了“标题1”这样的功能,就可以在博文开头看到文章的目录.
随机推荐
- SAP 从数据库中查询数据，带有where 条件。
数据库表 代码 *& Report ZSELECT_DATA_FROM_ZMAST_CUST *&------------------------------------------- ...
- abap异常处理 ， update module
1:异常 https://www.cnblogs.com/rainysblog/p/6665455.html 2:update module https://www.cnblogs.com/cindy ...
- php使用solr全文搜索引擎
前言 本来以为网上已经有了类似博文,不想重复,可是一圈搜下来,都是一些内容不甚明了的文章,或者solr版本太过老,参考价值不高,更有甚者,直接拷贝的别人的内容.一篇博客,各大平台都能看到,也不见转载链 ...
- 122A
Copy #include <stdio.h> int main() { int dig; int flag=0; scanf("%d", &dig); if( ...
- dfs1321
比较抽象吧,看到题时一点思想也没有,参考了别人的代码才知道...渣渣 #include <iostream>#include <stdio.h>#include <str ...
- 【EatBook】-NO.1.EatBook.1.JavaData.1.001-《JSON 必知必会-Introduction to JavaScript Object Notation》-
1.0.0 Summary Tittle:[EatBook]-NO.1.EatBook.1.JavaData.1.001-<JSON 必知必会-Introduction to JavaScrip ...
- zabbix 监控 redis
redis 可以直接使用zabbix官方的模板 模板地址: https://github.com/blacked/zbx_redis_template redis 主机通过脚本把数据推送到zabbi ...
- 采用Extjs MVVM + ThinkPHP 架构开发的思考
前后台号称都是MVC模式, 后台ThinkPHP框架实际上只提供web操作接口,直接返回json数据,因此只能算有Model和Controller两层, 前台ExtjsMVVM模式实际上就是分模块后的 ...
- mac-Navicat Premium 12连接Oracle
安装及破解: https://pan.baidu.com/s/1ip0oM9p856k34t3cIExa7Q(提取码请留言) Navicat连接了Oracle数据库 测试连接失败,提示:hostnam ...
- System.Web.UI.Page的页面基类
服务器端的page类 所有我们编写的页面都继承自page类,可见page类是非常重要的,page类提供了哪些功能,直接决定了我们的页面类可以继承什么功能,或者说,直接决定了我们的页面类功能的强大与否! ...