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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1458 天前的主题，其中的信息可能已经有所发展或是发生改变。

公司内网的 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 是如何修改页面上匹配的正则对象的？

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

油猴

url

字段

Web

7 条回复 • 2020-11-29 22:46:10 +08:00

thefack

2020-11-29 19:03:37 +08:00

脚本做的是，先用 document.querySelectAll() 获取所有需要的链接节点，循环中获取其 href 属性，再像你说的通过正则获取产品 id，然后追加该节点的兄弟节点来完成你的功能。

westoy

2020-11-29 19:36:39 +08:00

关键词"js 事件委托"，大致就是触发 click 事件的时候根据当前 dom 判断是不是你要的元素，是就改下链接

你这事用正则不是啥好主意，而且一开始就遍历元素，目标元素也不一定在啊

imdong

2020-11-29 20:22:09 +08:00

```
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

2020-11-29 20:23:33 +08:00

不了解油猴脚本规则，用原生 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

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

2020-11-29 21:51:53 +08:00

这种需求不可能就这么一点儿，完整实现肯定还是需要会 JS 的，MDN 大致看看就行，尤其是有 Python 基础的
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

imdong

2020-11-29 22:46:10 +08:00

https://www.w3school.com.cn/js/index.asp

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

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

前者是第一任恩师，后者是新晋恩师。