查找HTML / DOM中使用的所有类名

问题描述

如何获取HTML片段中使用的所有类名的列表？

例如，下面的HTML代码片段，

 < div class =name> 
< div class =first>< / div> 
< div class =last>< / div> 
< / div> 
  

会输出名称， first ， last 或 name ， name> ;第一，名称>最后。在这里，我很关心首先找到所有的类选择器。嵌套可以是可选的。

我期望使用Javascript或正则表达式。

解决方案

使用 querySelectorAll 获取文档中的所有元素，然后循环遍历它们，获取每个类的内容，将它们拆分为空格，然后将新内容添加到 allClasses 数组：

data-console =truedata-babel =false>

< div类= foo 的> < div class =bar baz>< / div>< / div>

要仅在文档的一部分中获取类名，请在 querySelectorAll 调用中指定：

  var allElements = document.getElementById（'my-elt'）。querySelectorAll（'*'）; 
  

现代方法

使用ES6，我们可以在功能上写下如下：

  []。concat（// concatenate 
 ... [... //数组
 document.querySelectorAll（'*'）//所有元素
]。
 map（//映射每个
 elt => //元素
 [... //到
 elt.classList //它的类
] 
）
）的数组; 
  

或者，作为单行：
<$ （...）; ...（）; ... [...]

然后，您会希望将 uniq 应用于结果。你可以自己编写，或者使用Underscore的 _。uniq 等等。这里有一个简单的例子：

 函数unique（array）{
 var prev; 
 return array.sort（）。filter（e => e！== prev&&&（prev = e））; 
} 
  

How can I get a list of all class names used inside an HTML Snippet?

For example, the HTML Snippet below,

<div class="name">
  <div class="first"></div>
  <div class="last"></div>
</div>

would have output name, first, last or name, name > first, name > last. Here, I am concerned about finding all class selectors first. Nesting could be optional.

I expect to use Javascript or Regular Expressions.

解决方案

Get all the elements in the document using querySelectorAll, then loop through them, getting each one's class, breaking it apart on spaces, and adding new ones to an allClasses array:

var allClasses = [];

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var classes = allElements[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var cls = classes[j];
    if (cls && allClasses.indexOf(cls) === -1)
      allClasses.push(cls);
  }
}

console.log(allClasses);

<div class="foo">
  <div class="bar baz"></div>
</div>

To get the classnames in only one part of the document, specify that in the querySelectorAll call:

var allElements = document.getElementById('my-elt').querySelectorAll('*');

Modern approach

Using ES6, we can write this more functionally as:

[].concat(                            // concatenate
  ...[...                             // an array of
    document.querySelectorAll('*')    // all elements
  ] .
    map(                              // mapping each
      elt =>                          // element
        [...                          // to the array of
          elt.classList               // its classes
        ]
    )
);

Or, as a one liner:

[].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList]));

Then you will want to apply uniq to the result. You can write that yourself, or use Underscore's _.uniq etc. Here's a simple one for use here:

function unique(array) {
  var prev;
  return array.sort().filter(e => e !== prev && (prev = e));
}

这篇关于查找HTML / DOM中使用的所有类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！