V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
uti6770werty
V2EX  ›  JavaScript

想在本地增强 Web 页面,浏览器要使用到油猴,油猴要使用到 JS,自己不会 JS(特别是与浏览器本身联动机制),请教要做这件事情的思路方法,(匹配到合适规则的 URL,提取 URL 里面的字段,并在 URL 后面加插一个 href)

  •  
  •   uti6770werty · 2020-11-29 18:47:28 +08:00 · 2073 次点击
    这是一个创建于 1440 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司内网的 web 内容,所以我也没办法直接给个 link 大家看,
    文字表达吧:
    页面上有很多“栏”(html 的 tr/td 格子),类似每一栏都有好几个 URL,有个 url 是:

    <a target="_blank" href="http://172.16.253.11/product/2017/pd=A2726159C6.htm">产品</a>
    

    目标是,获取产品的字段,生成一个新的链接,加在后面,就像这样:

    <a target="_blank" href="http://172.16.253.11/product/2017/pd=A2726159C6.htm">产品</a><a target="_blank" href="http://192.168.21.200/detial/pd=A2726159C6.htm">详情</a>
    

    问题 1: 产品型号提取字段我会 python 的方式,(?<=pd=).*?(?=.htm)就能提取出来,
    JS 似乎是 perl 的正则表达式,不知道这个能用不?
    请教油猴的 JS 如何对整个 web 代码进行查找"产品"这个 url?
    在油猴脚本里面,跟 web 浏览器本身的交互的一些 API (如获取当前页面的 html 代码),这些 API 是在那里可以看的? 在油猴本身的 wiki,似乎介绍不多,好像是学习过 JavaScript 都知道一样。。。。

    问题 2:
    油猴 JS 是如何修改页面上匹配的正则对象的?

    请教大家,有无相似功能的油猴脚本可以参考呢?

    7 条回复    2020-11-29 22:46:10 +08:00
    thefack
        1
    thefack  
       2020-11-29 19:03:37 +08:00   ❤️ 1
    脚本做的是,先用 document.querySelectAll() 获取所有需要的链接节点,循环中获取其 href 属性,再像你说的通过正则获取产品 id,然后追加该节点的兄弟节点来完成你的功能。
    westoy
        2
    westoy  
       2020-11-29 19:36:39 +08:00   ❤️ 1
    关键词"js 事件委托", 大致就是触发 click 事件的时候根据当前 dom 判断是不是你要的元素, 是就改下链接

    你这事用正则不是啥好主意, 而且一开始就遍历元素, 目标元素也不一定在啊
    imdong
        3
    imdong  
       2020-11-29 20:22:09 +08:00   ❤️ 1
    ```
    document.querySelectorAll('a').forEach((item) => {
    let matchs = item.href.match(/https?:\/\/[^\/]+\/product\/[0-9]+\/pd=([A-F0-9]+)\.htm/)
    if (matchs) {
    let link = document.createElement('a')
    link.href = "http://192.168.21.200/detial/pd=" + matchs[1] + ".htm"
    link.target = "_blank"
    link.innerText = "详情"
    item.after(link)
    }
    })
    ```

    讲真,去看油猴脚本的,真就默认你会 JavaScript 。

    这个脚本看能用不,能用可以考虑请我喝杯奶茶(开玩笑的)

    至于怎么让右油猴脚本跑起来,你去看文档吧。

    思路就是 #1 提供的说法。

    如 #2 所说,如果页面连接很多,这个效率确实挺低的。
    lisianthus
        4
    lisianthus  
       2020-11-29 20:23:33 +08:00   ❤️ 1
    不了解油猴脚本规则,用原生 js 写了一段代码,可以参考一下
    ``` javascript
    const elements = document.querySelectorAll('a[href]'); //所有包含 href 属性的 a 标签
    elements.forEach(element => { //遍历元素
    const { href } = element;
    const match = href.match(/pd=\w+\.htm/); //匹配形如 pd=ab123.htm 的字符串
    if (match) { //匹配成功
    //创建新的 a 标签,添加到元素后面
    const newElement = document.createElement('a');
    newElement.href = `http://192.168.21.200/detial/${match[0]}`;
    newElement.target = '_blank';
    newElement.textContent = '详情';
    element.after(newElement);
    }
    });
    ```
    uti6770werty
        5
    uti6770werty  
    OP
       2020-11-29 21:49:58 +08:00
    @westoy 修改原本的 URL 似乎不太好,要保留原 URL 使用....

    @imdong 代码要实现什么,完全能看懂,思路也明白了,应该还不能直接用的,油猴的脚本貌似要套一些加载修饰什么的,稍后我多翻一下 JS 的书,增加一些 if 判断,如果<a></a>里面的字句不是”产品"就跳过历遍,也许可以减少页面处理时间吧。。。
    想追问一个问题,我下载了一些 JS 的教学书,基本上都是在教语法,但油猴里面需要用到浏览器的一些 API,例如粘贴板,大概翻了一下书,这些似乎 JS 的书也没提过,油猴 wiki 上也没有,但是写脚本的人好像都会一样,有一些 document.xxx 的方法,都不知道哪里有介绍的。。。。


    @lisianthus 感谢感谢,如果不用油猴,我记得 firefox 浏览器用一个叫 uc 的东西,也可以把.js 加载起来,在页面渲染前运行。。。
    autoxbc
        6
    autoxbc  
       2020-11-29 21:51:53 +08:00   ❤️ 1
    这种需求不可能就这么一点儿,完整实现肯定还是需要会 JS 的,MDN 大致看看就行,尤其是有 Python 基础的
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
    imdong
        7
    imdong  
       2020-11-29 22:46:10 +08:00   ❤️ 1
    https://www.w3school.com.cn/js/index.asp

    https://www.runoob.com/js/js-tutorial.html

    新手自学入门,我首先推荐这两个网站。

    前者是第一任恩师,后者是新晋恩师。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   985 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 22:08 · PVG 06:08 · LAX 14:08 · JFK 17:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.