javascript 使用正则表达式的 getattribute 方法

Question

<div id="foo" platform="bar" table-index="1">
  hello!
</div>

如果我使用 getAttribute 方法获取值，它会像这样

var ele = document.querySelector("#foo").getAttribute("platform")

我可以通过 ele 变量得到“bar”。

但我想将 getAttribute 与正则表达式一起使用。

var ele = document.querySelector("#foo").getAttribute(`regex contains just "index"`)

单词“table-index”以索引结尾。所以我想找到属性并获得 1（table-索引值）只需使用“索引”和正则表达式。

我不知道如何在属性名称中使用正则表达式。

Answer 1

getAttribute 不能以这种方式使用——它接受一个字符串作为参数，而不是正则表达式。但是，您可以实施一种方法来做类似的事情。下面的方法通过使用元素的 [attributes] 属性然后遍历它们，搜索与正则表达式匹配的元素，然后 returning 该值。

请注意，此特定实现天真地假设您使用的正则表达式将仅匹配元素上的单个属性，并且将 return 它遇到的第一个匹配项——但是，您可以更聪明，写一些更健壮的东西 returns 匹配的 attribute/value 对的数组。

function getAttributeByRegex(element, regex) {
  const attributes = element.attributes;
  for (let i = attributes.length - 1; i >= 0; i--) {
    const attr = attributes[i];
    if (regex.test(attr.name)) {
      return attr.value;
    }
    return undefined;
  }  
}

const value = getAttributeByRegex(
  document.querySelector('#foo'),
  /-index/
);

console.log(value);

<div id="foo" platform="bar" table-index="1">
  hello!
</div>

Answer 2

您必须遍历属性才能找到名称与您的 RegExp 相匹配的属性。

function regexMatch(element, regex) {
  let match = [...element.attributes].find(i => regex.test(i.name));
  if (!match) return undefined;
  return match.value;
}

let ele = regexMatch(document.querySelector("#foo"), /index/g);
console.log(ele);

<div id="foo" platform="bar" table-index="1">
  hello!
</div>

Answer 3

const match = findAttributeMatch("foo", "index");
console.log(document.querySelector('#foo').getAttribute(match));

function findAttributeMatch(id, attribute) {
  const regex = RegExp(`(${attribute})`, 'gm');
  const element = document.querySelector(`#${id}`);

  const a = [...element.attributes].find(node => regex.test(node.name));
  return a && a["name"];
}

<!DOCTYPE html>
<div id="foo" platform="bar" table-index="1">
  hello!
</div>

javascript 使用正则表达式的 getattribute 方法

javascript getattribute method with regex

javascript

regex

getattribute