PS. 用来生成个人笔记的目录

1、输入：html文本

<h2>Notes</h2>

<p>1、小标题1。正文正文正文</p>

<div class="cnblogs_code">

<pre><span style="color: #000000;">ddjlasjdlas

</span><span style="color: #0000ff;">as</span><span style="color: #000000;">

dasdasjda</span></pre>

</div>

<p>2、小标题2</p>

<p>正文正文正文正文正文</p>

<p>3、小标题3</p>

<p>正文正文正文</p>

<p>4、小标题4</p>

<p>正文正文正文</p>

<p>&nbsp;</p>

<h2>Excercises</h2>

<p>① xxxxxx1</p>

<p>正文正文正文</p>

<p>② xxx2</p>

<p>正文正文</p>

<p>③ xx3</p>

<p>正文正文正文</p>

2、输出：含目录的html文本

<div id="diy_right_menu">

<h2>索引</h2>

<ul>

<li>

<p>Notes</p>

<ol>

<li><a href="#a1">标题1</a></li>

<li><a href="#a2">标题2</a></li>

<li><a href="#a4">标题3</a></li>

<li><a href="#a5">标题4</a></li>

</ol></li>

<li>

<p>Excercise</p>

<ol>

<li><a href="#b1">练习1</a></li>

<li><a href="#b2">练习2</a></li>

<li><a href="#b3">练习3</a></li>

</ol></li>

</ul>

</div>

<h2>Notes</h2>

<p><a name="a1"></a>1、小标题1。正文正文正文</p>

<div class="cnblogs_code">

<pre><span style="color: #000000;">ddjlasjdlas

</span><span style="color: #0000ff;">as</span><span style="color: #000000;">

dasdasjda</span></pre>

</div>

<p><a name="a2"></a>2、小标题2</p>

<p>正文正文正文正文正文</p>

<p><a name="a3"></a>3、小标题3</p>

<p>正文正文正文</p>

<p><a name="a4"></a>4、小标题4</p>

<p>正文正文正文</p>

<p>&nbsp;</p>

<h2>Excercises</h2>

<p><a name="b1"></a>① xxxxxx1</p>

<p>正文正文正文</p>

<p><a name="b2"></a>② xxx2</p>

<p>正文正文</p>

<p><a name="b3"></a>③ xx3</p>

<p>正文正文正文</p>

<p>&nbsp;</p>

3、自定义的规则

  • “类似1、xx  2、xx”会被转化为目录中的第一类二级标题Notes
  • “类似① xxx ② xx”会被转化为目录中的第二类二级标题Excercises
  • 第二类二级标题必须全部为英文字符，且1或者①前面都不能有空格，①后面只能是英文空格
  • Copy来的标题要先清除格式

4、Javascript代码

<!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"><h2>Notes</h2>

<h2>Exercises</h2></textarea>

        <button id="big-button">Generate</button>

        <script type="text/javascript">

            const button = document.querySelector('#big-button');

            button.addEventListener('click', handleClick);

            function handleClick(event) {

                const textarea = document.querySelector('#big-textarea');

                let inputHtml = textarea.value;

                textarea.value = generateDiy_right_menu(inputHtml);

            };

            function replaceAndRecordSmallTitles(str ,arr) {

                const regex = /<p>(\d{1,2})\u3001([\d\w\s\u4e00-\u9fa5]+)/g;

                const replaceAndRecordHelper = (_, index, smallTitle) => {

                    arr.push(smallTitle);

                    return `<p><a name="a${index}"></a>${index}、${smallTitle}`;

                }

                return str.replace(regex, replaceAndRecordHelper);

            }

            function replaceAndRecordExercises(str, arr) {

                const regex = /<p>([\u2460-\u2469])\s([\w\s]+)/g;

                let exerciseCount = 1;

                const replaceAndRecordHelper = (_, unicodeIndex, exerciseName) => {

                    arr.push(exerciseName);

                    return `<p><a name="b${exerciseCount++}"></a>${unicodeIndex} ${exerciseName}`;

                }

                return str.replace(regex, replaceAndRecordHelper);

            }

            function htmlMenu(small_titles, exercise_names) {

                const htmlMenuHead = '<div id="diy_right_menu">\n' +

                    '<h2>索引</h2>\n' + '<ul>\n<li>\n' + '<p>Notes</p>\n<ol>\n';

                let htmlTitles = "";

                for (let i = 0; i != small_titles.length; ++i) {

                    htmlTitles += `<li><a href="#a${i+1}">${small_titles[i]}</a></li>\n`;

                }

                let htmlExercise = "</ol></li>\n<li>\n<p>Exercises</p>\n<ol>\n";

                for (let i = 0; i != exercise_names.length; ++i) {

                    htmlExercise += `<li><a href="#b${i+1}">${exercise_names[i]}</a></li>\n`;

                }

                const htmlMenuTail = '</ol></li>\n</ul>\n</div>\n';

                const result = htmlMenuHead + htmlTitles + htmlExercise + htmlMenuTail;

                return result;

            }

            function generateDiy_right_menu(inputHtml) {

                let result = inputHtml.slice();

                // 用replace替换掉原文，顺便记录标题内容

                const small_titles = [];

                const exercise_names = [];

                result = replaceAndRecordSmallTitles(result, small_titles);

                result = replaceAndRecordExercises(result, exercise_names);

                // 自动生成目录

                if (result.slice(0, '<div id="diy'.length) != '<div id="diy') {

                    // 避免重复生成目录

                    result = htmlMenu(small_titles, exercise_names) + result;

                }

                return result;

            }

        </script>

    </body>

</html>

JavaScript笔记 #05# 用Regex辅助生成文章目录的更多相关文章

  1. JavaScript笔记 #08# 用Regex辅助生成文章目录 V2.0

    索引 简介 测试用例 代码 简介 * 用Regex辅助生成文章目录 2.0 * 1.提高了功能的通用性(假定的文章格式更加普遍,即按照h2h3h4分级) * 2.改善了代码的可读性(稍微牺牲了一点点性 ...

  2. CSDN中根据文章自动生成文章目录

    概述 CSDN中有根据文件内容中H标签在文章中自动生成文章目录,看起来比较专业,就想把它搬到自己的博客园中.类似下图 提取JS脚本 通过浏览器开发者工具(IE/Chrome)找到产生文章目录javas ...

  3. 使用autoc js生成文章目录（侧边）导航栏

    介绍: autocjs 是一个专门用来生成文章目录(Table of Contents)导航的工具.autocjs 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的 ...

  4. WPS生成文章目录

    WPS生成文章目录 1.引用–>插入目录...即可!

  5. 用React实现一个自动生成文章目录的组件

    原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...

  6. javascript笔记05：函数表达式和函数语句的区别

    1.首先是函数语句: myfunc(); function myfunc() { //执行一些语句 } 当函数语句被定义的时候,在一个脚本代码被优先考虑,因此,无论该函数是定义之前或者定义之后都可以被 ...

  7. HelloDjango 第 11 篇：自动生成文章摘要

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 博客文章的模型有一个 excerpt 字段,这个字段用于存储文章的摘要.目前为止,还只 ...

  8. 使用office添加文章目录

    当我们用word录入完文章,文章里有段落,段落里又有小标题,每一种标题的格式不尽相同,word为我们提供了相当丰富的标题格式,如:正文,无间隔,标题1,标题2,标题3,标题4,副标题,强调,要点... ...

  9. CSDN添加文章目录

    在发表的文章中,系统根据文章中H1到H6标签自动生成文章目录. 一.发表文章的时候合理使用“标题”标签. 二.目录生成.只要在文章中使用了“标题1”这样的功能,就可以在博文开头看到文章的目录.

随机推荐

  1. 多线程——继承Thread类实现一个多线程

    继承Thread类实现一个多线程 Thread类部分源码: package java.lang; //该类实现了Runnable接口 public class Thread implements Ru ...

  2. Go包管理工具Vendor使用

    一.Go包管理工具Vendor 一.使用步骤 1.首先,从go get -u github.com/kardianos/govendor下载govendor工具到本地. 2.govendor使用时,必 ...

  3. Java Selenium - 元素操作 (二)

    一篇概括了常用的元素定位方法,但是找到元素还是不够的,模拟鼠标的操作,完成各个功能点的自动操作才是关键. 下面是常见的页面元素操作会涉及到的方法,不是很全,比较复杂的后面单独拿出来做案例. 一, 输入 ...

  4. IntelliJ IDEA 17 本地LicenseServer激活

    注意:此方法适用于Idea v2017.2.x 版本及以前版本. IntelliJ IDEA及破解包下载地址:百度网盘   密码:hlko 一.将IntelliJIDEALicenseServer.e ...

  5. python while for else

    python的循环挺有意思 while和for体中可以带上else项 while中的else表示循环条件不成立时,去执行一次,也就是退出循环前去做一次 for中的else表示固定循环正常完成后,去执行 ...

  6. iOS 开发笔记-控制器翻页

    找了一天,终于找到了两个能用的. 1.https://github.com/wangmchn/WMPageController 2.https://github.com/everettjf/EVTTa ...

  7. Linux之HugePages快速配置

    关于Linux系统的HugePages与Oracle数据库优化,可以参考熊爷之前的文章,相关概念介绍的非常清晰: Linux大内存页Oracle数据库优化 本文旨在Linux系统上快速配置HugePa ...

  8. 如何使用js判断当前页面是pc还是移动端打开的

    1.利用了正则表达式和三目运算符,含义就是如果是移动端打开的话那就跳转到 "https:www.baidu.com/" ,如果不是就跳转到"http://new.baid ...

  9. keepalived+双主架构

    简介 keepalived是基于VRRP协议的,全称 Virtual Redundent Routing Protocal 虚拟路由协议,为解决静态路由单点故障引起的网络失效问题设计的一套主备协议 两 ...

  10. 运行vs时打开一个浏览器窗口，而不是在原有窗口上打开一个标签

    1.运行vs时打开一个浏览器窗口,而不是在原有窗口上打开一个标签,结束调试时窗口又关闭了,特别麻烦. 在用swagger调试接口时,好不容易输入了测试数据,然而窗口关闭了,再次调试又得重新输入. 解决 ...