使用 getElementsByTagName 查找变量中的所有 href

Question

在一个变量中，我持有 HTML 源代码，这是我从 DB 获得的。我想搜索此内容以查找所有 "a href" 属性并将它们列在 table.

中

现在我在这里找到了如何在 DOM 中搜索它（如下所示），但是如何使用它在变量中搜索？

var links = document.getElementsByTagName("a").getElementsByAttribute("href");

目前得到这个，它正在通过 RegEx 进行搜索，但效果不是很好：

matches_temp = result_content.match(/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’&quote]))/ig);

在 result_content 我持有那个 HTML 来源。

Answer 1

getElementsByTagName returns 没有名为 getElementsByAttribute 的方法的节点列表，但仅当您具有 DOM 访问权限时

没有DOM（例如node.js）

const hrefRe = /href="(.*?)"/g;
const urlRe = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’&quote]))/ig;

 
const stringFromDB = `<a href="http://000">000</a>
Something something <a href="http://001">001</a> something`

stringFromDB.match(hrefRe).forEach(
 (href) => console.log(href.match(urlRe)[0] ) 
);

// oldschool: 
// stringFromDB.match(hrefRe).forEach(function(href) {  console.log(href.match(urlRe)[0] )      });

在这段代码中，我首先创建了一个 DOM 片段此外，我只获得以 href 开头的锚

注意 getAttribute 以便浏览器不会尝试解释 URL

如果您只想匹配特定类型的 href，请使用正则表达式：

const re = /\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’&quote]))/ig;

const stringFromDB = `<a href="http://000">000</a>
<a href="http://001">001</a>`

let doc = document.createElement("div");
doc.innerHTML = stringFromDB

doc.querySelectorAll("a[href]").forEach(
  (x) => console.log(x.getAttribute("href").match(re)[0])
);

没有正则表达式

const stringFromDB = `<a href="http://000">000</a>
<a href="http://001">001</a>`

let doc = document.createElement("div");
doc.innerHTML = stringFromDB

doc.querySelectorAll("a[href]").forEach(
 (x) => console.log(x.getAttribute("href")) 
);

Answer 2

首先，您不应该使用 RegEx 来解析 HTML。 This answer 解释原因。

其次，您使用的 getElementsByAttribute 不正确 - 它完全按照它所说的进行操作 通过属性获取元素 。您应该只在所有带有 href 的元素上使用 querySelectorAll，然后在 href 中使用 map：

var hrefs = document.querySelectorAll("a[href*=http]");
var test = Array.prototype.slice.call(hrefs).map(e => e.href);
console.log(test);

<a href="http://example.com">Example</a>
<a href="http://example1.com">Example 1</a>
<a href="http://example2.com">Example 2</a>
<a href="http://example3.com">Example 3</a>

使用 getElementsByTagName 查找变量中的所有 href

Using getElementsByTagName to find all hrefs in a variable

javascript

getelementsbytagname