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”这样的功能,就可以在博文开头看到文章的目录.
随机推荐
- python的mutable变量与immutable变量
python的变量分为mutable(可变的)和immutable类型. mutable:dict, list immutable:int , string , float ,tuple..
- 关于运行python脚本产生__pycache__
是什么? 用python编写好一个工程,在第一次运行后,总会发现工程根目录下生成了一个__pycache__文件夹,里面是和py文件同名的各种 *.pyc 或者 *.pyo 文件. python脚本编 ...
- 利用SparkLauncher 类以JAVA API 编程的方式提交Spark job
一.环境说明和使用软件的版本说明: hadoop-version:hadoop-2.9.0.tar.gz spark-version:spark-2.2.0-bin-hadoop2.7.tgz jav ...
- ansible 快速入门
安装 $ sudo apt-get install software-properties-common $ sudo apt-add-repository ppa:ansible/ansible $ ...
- mybatis oracle 插入自增记录 获取主键值 写回map参数
网上搜了好多文章照着弄都返回不了主键给map, 实践证明要在传入的map参数里写回插入的主键,要这样写 <selectKey resultType="java.lang.Integer ...
- 《Java程序设计》第一周学习记录（2）
目录 使用JDB调试程序 系统文件被覆盖的挽救 参考资料 使用JDB调试程序 JDB是JDK自带的基于命令行的调试程序.我们先来man一下吧(说到这里,我之前在翻娄老师的博客的时候看到一篇文章:做中学 ...
- Python list 和 tuple 使用小记
list和tuple是Python内置的有序集合,一个可变,一个不可变.根据需要来选择使用它们. 1.内置数据类型,列表List >>> appleVersion = ['apple ...
- Cocos Creator 键盘监听事件
键盘事件键盘.设备重力传感器此类全局事件是通过函数 cc.systemEvent.on(type, callback, target) 注册的.cc.SystemEvent.EventType.KEY ...
- Deeplab v3+的结构代码简要分析
添加了解码模块来重构精确的图像物体边界.对比如图 deeplab v3+采用了与deeplab v3类似的多尺度带洞卷积结构ASPP,然后通过上采样,以及与不同卷积层相拼接,最终经过卷积以及上采样得到 ...
- 32.js 判断当前页面是否被浏览
可以通过document.hidden属性判断当前页面是否是激活状态. 兼容性:IE10+,Firefox10+,Chrome14+,Opera12.1+,Safari7.1+ 兼容性写法示例: va ...