上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    438

    回帖

    944

    积分

    荣誉开发者

    积分
    944

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-6-19 12:11:01 | 显示全部楼层 | 阅读模式
    安装此脚本 如何安装? 脚本问题反馈 给脚本评分 查看代码

    本帖最后由 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%;
      }
    
    `)
    
    I frequently record, because want to leave something.
  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    857

    回帖

    1356

    积分

    荣誉开发者

    积分
    1356

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-6-19 13:15:56 | 显示全部楼层
    正则写的不对吧,[^<]是指匹配非'<'的字符,如果th里面有子元素,比如这样的:<th><p>...</p></th> 就会匹配不上,可以改成这样:/<th>[\s\S]*?<\/th>/g
    另外,非常不建议用正则获取元素,参考这篇文章:https://bbs.tampermonkey.net.cn/ ... wthread&tid=973
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    438

    回帖

    944

    积分

    荣誉开发者

    积分
    944

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-6-19 13:28:42 | 显示全部楼层
    cxxjackie 发表于 2022-6-19 13:15
    正则写的不对吧,[^

    确实啊。没想到嵌套的情况。人麻了
    I frequently record, because want to leave something.
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表