Regex返回以特定值开头的网页的所有属性

Question

问题很简单，我需要获得其值以http://example.com/api/v3?开头的所有属性的值。例如，如果一个页面包含

<iframe src="http://example.com/api/v3?download=example%2Forg">
<meta twitter="http://example.com/api/v3?return_to=%2F">

然后我应该得到一个包含2个成员的数组/列表:http://example.com/api/v3?return_to=%2F和http://example.com/api/v3?download=example%2Forg (顺序无关)。

我不需要元素，只需要属性的值。
基本上，我需要返回以http://example.com/api/v3?开始并以空格结束的字符串的正则表达式。

Answer 1

有一个CSS选择器*，意思是"任何元素"。

没有CSS选择器表示"任何带有此值的属性"。属性名是任意的。虽然HTML规范中定义了几个属性，但也可以使用自定义的属性，如示例中的twitter属性。这意味着您必须遍历给定元素上的所有属性。

如果没有全局属性值选择器，您将需要手动遍历所有元素和值。在使用暴力之前，您可以确定一些启发式方法来帮助缩小搜索范围。

Answer 2

正则表达式可能是这样的:

/http://example.com/api/v3?S+/g

确保用反斜杠转义每个/和?。S+产生所有后续的非空格字符。如果你还想排除引号，你也可以尝试[^s"]+而不是S。

根据我的经验，正则表达式通常比直接处理已经解析过的对象要慢，所以我建议您尝试这些Array和DOM函数:

获取所有元素，将它们映射到它们的属性，并过滤那些以http://example.com/api/v3?开头的元素，将所有属性列表减少到一个Array，并将这些属性映射到它们的值。

Array.from(document.querySelectorAll("*"))
  .map(elem => Object.values(elem.attributes)
  .filter(attr => attr.value.startsWith("http://example.com/api/v3?")))
  .reduce((list, attrList) => list.concat(attrList), [])
  .map(attr => attr.value);

您可以找到ES6和ES5函数的多边形，并可以使用Babel或相关工具将代码转换为ES5(或手动替换箭头函数)。