Question

我将以下元素存储为String：

<div class="some-class" id="my-id" data-theme="black">
   <strong data-animation="fade" disabled>Hello world!</strong>
</div>

我想提取所有属性名称，如下所示：

["class", "id", "data-theme", "data-animation", "disabled"]

这是我试图做的，但我也得到了值和剂量匹配数据动画和禁用：

http://jsbin.com/hibebezibo/edit?js,console

修改

使用以下方法获取属性：

[\w-]+(?=\s*=\s*".*?")

但是我仍然无法让＃34;禁用＆＃34;丙

有人可以解释一下如何实现这个目标吗？谢谢！

Answer 1

使用下面的正则表达式，它可以从积极的前瞻中获益，你可以匹配属性＆＃39;名称：

[ ][\w-]+(?=[^<]*>)

注意：必须在字符类中添加-。

javascript代码：

＆＃13;

const HtmlElement = `<div class="some-class" id="my-id" data-theme="black">
  <strong data-animation="fade" disabled>Hello world!</strong>
</div>`

console.log(HtmlElement.match(/ [\w-]+(?=[^<]*>)/g).map(function(element) {         
    return element.trimLeft();
}));

＆＃13;

然而，它不是防弹的，因为它可以匹配>之后的单词。 E.g：

<strong data-animation="fade" disabled>Hello world!></strong>

因此建议使用DOM功能来完成这样的任务：

＆＃13;

var html = document.createElement('div');
html.innerHTML = '<div class="some-class" id="my-id" xlink:href data-theme="black"><strong data-animation="fade" disabled>Hello world!</strong></div>';
var attrNodes = document.evaluate('//*/attribute::*', html, null, XPathResult.ANY_TYPE, null)

var nextAttrNode = attrNodes.iterateNext()
var arrAttrs = [];
while (nextAttrNode) {
  arrAttrs.push(nextAttrNode.name)
  nextAttrNode = attrNodes.iterateNext();
}
console.log(arrAttrs)

＆＃13;

正则表达式匹配HTML属性名称

1 个答案: