油猴中文网文章的分页功能以及显示总页数

wwwwwllllk

本帖最后由 wwwwwllllk 于 2022-6-19 13:05 编辑

说下我遇到的问题。我本来是想直接写后台脚本调地址直接通过正则表达式获取文章列表的内容的，但是正则总是拿不到，不知道哪里的问题。那段代码我也注释到里面了。搞不懂为啥没拿到。希望有人帮忙解答。
脚本功能实现了，步骤也有。引入element总会是不是报错。所以也没用了。想用react也不知道在脚本里面怎么定义我的类型。

// ==UserScript==
// @name         脚本猫文章的分页功能以及显示总页数
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  为了方便看道总的文章，要不然绝逼不写。首先我们需要第一次把所有的页面先点击一次。只需要一次。然后存储到localStorage。之后就不需要。点开直接看就好了
// @author       You
// @match        https://bbs.tampermonkey.net.cn/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant        unsafeWindow
// @run-at document-start
// @grant        GM_addStyle
// @connect      api.szfx.top
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// 引入vue3.js
let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@next";
document.documentElement.appendChild(script);

//   <button @click="search">显示当前页面的数据(以前我之前页面的数据)</button>
window.onload=()=>{
let text=`<div id="app">
       <div class="search">
            <button @click="displayArticleList">显示/隐藏</button>
            <button @click="displayContent">仅仅显示我localStorage里面的数据</button>
            <button @click="search">显示当前页面的数据(以前我之前页面的数据)</button>
            <button @click="clearYeMianContent">清空页面显示的内容而不是清除localStorage</button>
            <button @click="clearContent">清除localStorage里面的内容</button>
            <div class="articleList">
                <div>发表的文章<div>
                <span>当前{{currentPage}}页</span>
                <button  @click="pre">上一页</button>
                <button  @click="next">下一页</button>
                <span>共{{totalPage}}页</span>
                <ol >
                    <li v-for="(item, index) in articleList ">
                        <Fragment v-if="index < currentPage*20 && index >= (currentPage-1) * 20">
                          {{index+1}}-<span v-html="item">{{item}}<span>
                        </Fragment>  
                    </li>
                <ol>  
            </div>
       </div>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
      const App = {
        data() {
          return {
            articleList: [],
            totalPage: 1,
            currentPage: 1,
          };
        },
        methods: {
            search(){
                // 因为每个用户的uid是不一样的，所以我这样存储一下，每个用户的就以key-value的形式存到键值对里面
                let uid;
                // 通过url地址拿到uid
                let url = window.location.href;
                try{
                    let urlArr = url.split("&");
                    uid = urlArr[1].split("=")[1];
                }
                catch(err){
                    console.log("该页面脚本没有相应的功能")
                }
                if(localStorage.getItem("allAuthorArticleList")){
                    // 点击的时候先拿到我之前存到localStorage里面的值
                    let preArticleList = JSON.parse(localStorage.getItem("allAuthorArticleList"));
                    // 因为我里面存了多个用户了所有要这样判断一下
                    for(var index in preArticleList){
                        if(index == uid){
                            this.totalPage = Math.ceil(preArticleList[uid].length/20);
                            // 然后把前面的先存进去
                            this.articleList = preArticleList[uid];
                        }
                    } 
                }

                // 拿到当前页面的内容并放到articleList数组里面
                let thContentList = document.getElementsByTagName("th");
                for(let i=0; i < thContentList.length;i++){
                   if(i == 0 ){

                   }else {
                       this.articleList.push(thContentList[i].innerHTML);
                   }

                }
                // 所有读者的列表，最后以key-value存储到localStorage里面
                let allAuthorArticleList = {};
                allAuthorArticleList[uid] = this.articleList;
                localStorage.setItem("allAuthorArticleList",JSON.stringify(allAuthorArticleList));  
                // 这样总页数就会马上更新
                this.displayContent();
                // let that = this;
                // GM_xmlhttpRequest({
                // method: "GET",
                // responseType: "json",
                // url: "https://bbs.tampermonkey.net.cn/home.php?mod=space&uid=2&do=thread&view=me&order=dateline&from=space",
                // onload: function (xhr) {
                //     console.log(xhr);
                //     // 参考文章https://www.cnblogs.com/huoan/p/9600561.html
                //     if (xhr.readyState === 4 && xhr.status === 200) {
                //         // 拿到整个页面
                //         let allHtmlContent = xhr.responseText;
                //         let reg = /<th>[^<]*<\/th>/g; 
                //         let contentList = allHtmlContent.match(reg);
                //         console.log(contentList)
                //     } else {
                //         console.log("获取数据失败");
                //     }
                //  },
                // });
            },
            clearContent(){
                localStorage.clear();  
            },
            clearYeMianContent(){
                this.articleList = []
            },
            displayContent(){
                // 因为每个用户的uid是不一样的，所以我这样存储一下，每个用户的就以key-value的形式存到键值对里面
                let uid;
                // 通过url地址拿到uid
                let url = window.location.href;
                try{
                    let urlArr = url.split("&");
                    uid = urlArr[1].split("=")[1];
                    let preArticleList = JSON.parse(localStorage.getItem("allAuthorArticleList"));
                    for(var index in preArticleList){
                        if(index == uid){
                            this.totalPage = Math.ceil(preArticleList[uid].length/20);
                            // 然后把前面的先存进去
                            this.articleList = preArticleList[uid];
                            console.log(preArticleList[uid])
                        }
                    } 
                }
                catch(err){
                    console.log("localStorage里面没有allAuthorArticleList属性，是不是你刚才清除了")
                }

            },
            //控制articleList盒子的显示和隐藏
            displayArticleList(){
                let divHeZi = document.getElementsByClassName("articleList")[0];
                if(divHeZi.style.display == "" || divHeZi.style.display == "block"){
                    divHeZi.style.display = "none";
                } else {
                    divHeZi.style.display = "block";
                }
            },
            //上一页
            pre(){
               if(this.currentPage == 1){
                   alert("默认就是从第一页开始的别点了")
               } else {
                   this.currentPage = this.currentPage - 1;
               }
            },
            // 下一页
            next(){
                this.currentPage = this.currentPage + 1;
            }     
        }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
}

GM_addStyle(`
  #app {
       position: absolute;
       top: 0vh;
       right: 0vw;
       background: skyblue;
       width: 220px;
       z-index:999;
       overflow:scroll;
  }
  .articleList {
      display: block;
      height:100%;
  }

`)

cxxjackie

正则写的不对吧，[^<]是指匹配非'<'的字符，如果th里面有子元素，比如这样的：<th><p>...</p></th> 就会匹配不上，可以改成这样：/<th>[\s\S]*?<\/th>/g
另外，非常不建议用正则获取元素，参考这篇文章：https://bbs.tampermonkey.net.cn/ ... wthread&tid=973

wwwwwllllk

cxxjackie 发表于 2022-6-19 13:15
正则写的不对吧，[^

确实啊。没想到嵌套的情况。人麻了