Использование getElementsByTagName для поиска всех ссылок в переменной - PullRequest
Новая
       24

Использование getElementsByTagName для поиска всех ссылок в переменной

0 голосов
/ 25 февраля 2019

В переменной я храню исходный код HTML, полученный из БД.Я хотел бы найти в этом содержимом все атрибуты "a href" и перечислить их в таблице.

Теперь я нашел здесь, как искать его в 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);

In result_content I 'Я держу этот источник HTML.

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Во-первых, вы не должны использовать RegEx для разбора HTML. Этот ответ объясняет почему.

Во-вторых, вы используете getElementsByAttribute неправильно - он делает именно то, что говорит, и получает элементы по атрибутам .Вы должны просто использовать querySelectorAll на всех элементах с href, а затем map из href s: 

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>
0 голосов
/ 25 февраля 2019

getElementsByTagName возвращает список узлов, у которого нет метода с именем 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, начиная с

NOTE thegetAttribute, поэтому браузер не пытается интерпретировать 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")) 
);
...