公司内网的 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 是如何修改页面上匹配的正则对象的?
请教大家,有无相似功能的油猴脚本可以参考呢?
1
thefack 2020-11-29 19:03:37 +08:00 1
脚本做的是,先用 document.querySelectAll() 获取所有需要的链接节点,循环中获取其 href 属性,再像你说的通过正则获取产品 id,然后追加该节点的兄弟节点来完成你的功能。
|
2
westoy 2020-11-29 19:36:39 +08:00 1
关键词"js 事件委托", 大致就是触发 click 事件的时候根据当前 dom 判断是不是你要的元素, 是就改下链接
你这事用正则不是啥好主意, 而且一开始就遍历元素, 目标元素也不一定在啊 |
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 所说,如果页面连接很多,这个效率确实挺低的。 |
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); } }); ``` |
5
uti6770werty OP @westoy 修改原本的 URL 似乎不太好,要保留原 URL 使用....
@imdong 代码要实现什么,完全能看懂,思路也明白了,应该还不能直接用的,油猴的脚本貌似要套一些加载修饰什么的,稍后我多翻一下 JS 的书,增加一些 if 判断,如果<a></a>里面的字句不是”产品"就跳过历遍,也许可以减少页面处理时间吧。。。 想追问一个问题,我下载了一些 JS 的教学书,基本上都是在教语法,但油猴里面需要用到浏览器的一些 API,例如粘贴板,大概翻了一下书,这些似乎 JS 的书也没提过,油猴 wiki 上也没有,但是写脚本的人好像都会一样,有一些 document.xxx 的方法,都不知道哪里有介绍的。。。。 @lisianthus 感谢感谢,如果不用油猴,我记得 firefox 浏览器用一个叫 uc 的东西,也可以把.js 加载起来,在页面渲染前运行。。。 |
6
autoxbc 2020-11-29 21:51:53 +08:00 1
这种需求不可能就这么一点儿,完整实现肯定还是需要会 JS 的,MDN 大致看看就行,尤其是有 Python 基础的
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript |
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 新手自学入门,我首先推荐这两个网站。 前者是第一任恩师,后者是新晋恩师。 |