Question

有一个javascript字符串，它是一个有效的HTML代码。获取包含从该字符串中获取的所有类的javascript数组的最快方法是什么？

var mystr = '<div class="class1 class2"><p id="id1">some <span class="class3">text about class="class4"</span></p></div>';

预期结果是

var myarr =  ["class1","class2","class3"];

请仅限独特课程。这个数组中的顺序不是问题。

Answer 1

一种方法，避免使用正则表达式：

＆＃13;

// create a <div>' to hold the HTML:
var div = document.createElement('div');
// set the innerHTML of the <div> to the string of HTML:
div.innerHTML = '<div class="class1 class2"><p id="id1">some <span class="class3">text about class="class4"</span></p></div>';
// get all elements within the <div> that have a class attribute:
classed = div.querySelectorAll('[class]'),
// create an empty array to hold the found class-names:
  classes = [];

// iterate over the elements with a class-attribute, using forEach:
[].forEach.call(classed, function(el) {
  // iterate over the classes that the current element has, using 'classList':
  [].forEach.call(el.classList, function(c) {
    // if the current class (from the classList) isn't already in the array,
    // we add it to the array:
    if (classes.indexOf(c) === -1) {
      classes.push(c);
    }
  });
});

console.log(classes);

＆＃13;

参考文献：

Answer 2

你可以这样做：

＆＃13;

var div = document.createElement('div'), //Create a "container" for the html
    elements, classes = [];
// Insert the HTML into the container, allowing the browser to parse it's DOM
div.innerHTML = '<div class="class1 class2"><p id="id1">some <span class="class3">text about class="class4"</span></p></div>'  then.
var elements = div.querySelectorAll('*'); // Get an array of all elements

for(var i = 0; i < elements.length; i++){
    classes = classes.concat(elements[i].className.split(' ')) // Concat an array of classnames for each element in there.
}

classes = classes.filter(function(element){return element !== ''}) // Filter out empty class names.

console.log(classes)
alert(JSON.stringify(classes))

＆＃13;

请注意，这同时使用：
forEach和querySelectorAll，这些都是IE 9完全支持的。

Answer 3

上述方法对于此问题似乎过于复杂。我认为你不必将字符串附加到文档中。我只想通过子串'class =“'将字符串分开，并从那里开始工作。

var tags = mystr.split("class=\"");
var classes = new Array();
var endclass;
for (var i=0; i<tags.length; i++) {
  endclass = tags[i].indexOf("\">");
  if (endclass > -1) {
    var newclass = tags[i].substring(0,endclass).split(" ");
    classes = classes.concat(newclass);
  }
}

这是我的jsfiddle：http://jsfiddle.net/nmkjvqmL/

然而，假设该类位于标记的末尾。如果它不总是在标记的末尾，您可以更改此行：endclass = tags[i].indexOf("\">");到此endclass = tags[i].indexOf("\"");但是，这将包括不在标记中的字符串class =“whatever”，所以你必须确保此文本不在字符串中。

如何从html代码中获取类名列表？

3 个答案: