txt小说阅读美化

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

前言：

突然在电脑找到一本txt格式小说，使用浏览器打开后界面太难看

我想试着模拟一下小说网站的阅读，提取个目录出来。。。。并实现点击跳转至对应内容。。
实现功能：

• 美化界面（bushi)
• 提取目录
• 点击章节跳转对应章节

版本2已解决版本1的不足。

---

一、效果

截屏

版本1：

版本2：

演示

二、使用步骤

按住ctrl+shift+i
在控制台输入如下代码，然后按回车

版本1：

样式可以，逻辑有些问题，只能匹配第中文章+空格+章名

//设置样式
document.body.style="display: flex;background-color: gainsboro;"
let pre=document.querySelector("pre");//
pre.setAttribute("style",
    "word-wrap: break-word;" +
    "white-space: pre-wrap;margin:auto;"+
    "font-size: 21px;width: 40%;");
//必须设置了width不是占100%，再margin:auto，才能让pre居中。。
//获取目录
let text=pre.innerText
//[\u4e00-\u9fa5]匹配中文，.匹配除换行符以外的所有符号。
let dir=text.match(/第[\u4e00-\u9fa5]+章 .{1,10}/g)
let dirDiv=document.createElement("div")
//注意是className
dirDiv.className="dirDiv"
console.log(dir)
//将目录以列表形式展示
for(let i=0;i<dir.length;i++){
    let li=document.createElement("li");
    //目录里第一章+空格+空格+起始。这里有两个空格，而正文里只有一个，就能保证搜索就会只搜到正文的。
    li.innerText=dir[i].substring(0,dir[i].indexOf("章")+1)+'  '+dir[i].substring(dir[i].indexOf("章")+2,);
    console.log(li.innerText)
    dirDiv.appendChild(li);
}
document.body.appendChild(dirDiv)
//点击目录区域触发事件，事件委托：把原本需要绑定在子元素的响应事件委托给父元素 事件委托的好处:减少对DOM的操作
dirDiv.onclick=(event)=>{
    //event.target找到最终点击的元素。最开始冒泡的元素
    let dirtitle=event.target.innerText;
    let keyword=dirtitle.substring(0,dirtitle.indexOf("章")+1)+" "+dirtitle.substring(dirtitle.indexOf("章")+2,)
    let ans=true;
    //console.log("kyw",keyword);//document.body.focus();
    let i=0;
    //开启循环查找，即环绕查找，循环10次直到找到为止
    while (!(ans=window.find(keyword,false,false,true,false,false))){
        i++;
        if(i>10)
            break;
    }
    if(!ans){
        console.log("出错啦......")
    }
}
document.querySelector(".dirDiv").
setAttribute("style",
    "width: 300px;position: " +
    "fixed;text-align: left;overflow: auto;" +
    "height: 775px;background-color: cadetblue;");

版本2

识别格式： 字符+第字符章+字符
可识别“水墨之地 第499章起源”、第十章 很好、第8章 不错 之类的章名

//设置样式
document.body.style="display: flex;background-color: #112;"
let pre=document.querySelector("pre");
pre.setAttribute("style",
    "word-wrap: break-word;white-space: pre-wrap;margin: 0 35% 0 30%;font-size: 21px;color: aliceblue;background-color: #222;width: 30%;padding: 10px;");
//必须设置了width不是占100%，再margin:auto，才能让pre居中。。
//获取目录
let text=pre.innerText
//[\u4e00-\u9fa5]匹配中文，.匹配除换行符以外的所有符号。
//可识别“水墨之地 第499章起源”类的章名。
let dir=text.match(/.*第.+章.{1,10}/g)
let dirDiv=document.createElement("div")
//注意是className
dirDiv.className="dirDiv"
//console.log(dir)
//将目录以列表形式展示
for(let i=0;i<dir.length;i++){
    let li=document.createElement("li");
    //找到在章名末尾加一个空格，而正文里末尾少一个空格，所以搜索就能只搜到正文的。
    li.innerText=dir[i]+' ';
    //console.log(li.innerText)
    dirDiv.appendChild(li);
}
document.body.appendChild(dirDiv)
//点击目录区域触发事件，事件委托：把原本需要绑定在子元素的响应事件委托给父元素 事件委托的好处:减少对DOM的操作
dirDiv.onclick=(event)=>{
    //event.target找到最终点击的元素。最开始冒泡的元素
    let dirtitle=event.target.innerText;
    //删去末尾一个空格
    let keyword=dirtitle.substring(0,dirtitle.length);
    let ans=true;
    //console.log("kyw",keyword);
    let i=0;
    //开启循环查找，即环绕查找，如何循环10次直到找到为止
    while (!(ans=window.find(keyword,false,false,true,false,false))){
        i++;
        if(i>3)
            break;
    }
    document.body.focus();
    document.querySelector("pre").click();
    if(!ans){
        console.log("出错啦......")
    }
    window.find('')
}
document.querySelector(".dirDiv").
setAttribute("style",
    "width: 350px;position:fixed; " +
    "right: 0;padding: 10px;color: #eee;"+
    "text-align: left;overflow: auto;" +
    "height: 755px;background-color: #222;");

2.代码说明

1. 通过正则表达式匹配输出目录到li
2. 给li的父标签div设置点击事件，点击后通过event.target找到具体点击的是哪个li。
3. 获取li的内容作为查找的关键字
4. 调用window.find()达到类似于ctrl+f的查找效果，来定位文章的内容。

总结

1. 样式设置
2. 创建子元素
3. 正则表达式
4. 事件委托
5. window.find的使用