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> </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> </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> </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>