javascript - 使用正则表达式在字符串 html 中查找链接

Question

我只需要在 href 中找到 html 字符串中的所有链接在双 qute("") 或单 qute('') 的两种情况下

例子:

<a href='text'>

或

<div href="text">;

我想到了

function findHrefValues(str) {
  let hrefs = [];
  let pattern = /href='([^']+)'/g;
  let match = pattern.exec(str);
  if(match && Array.isArray(match)) {
    match.forEach((href)=> {
      if(href) hrefs.push(href);
    });
  }
  return hrefs;
}

但它不能很好地识别双引号。

Answer 1

捕获 href 之后的第一个 ' 或 "，然后使用包含任何但的字符集通过反向引用使用相同的引号字符，然后再次使用反向引用 来匹配 href 的末尾:

const str = `<a href='tex""t1'>
<div href="tex''t2">`;

function findHrefValues(str) {
  const re = /href=(['"])([^\1]+?)\1/g;
  const matches = [];
  let match;
  while ((match = re.exec(str)) !== null) {
    matches.push(match[2]);
  }
  return matches;
}

console.log(findHrefValues(str));

但是，如果可能的话，不要为此使用正则表达式 - 而是解析 HTML 字符串，可能使用 DOMParser:

const str = `<a href='text1'>
<div href="text2">`;
const doc = new DOMParser().parseFromString(str, 'text/html');
const hrefs = Array.from(
  doc.querySelectorAll('[href]'),
  element => element.getAttribute('href')
);
console.log(hrefs);