例如，我有一个 html 作为文本字符串
var html="bla<p class=" c1 c2">blabla<button></button><div id="bla" class="c1 c3 "></div>"
我想将所有唯一的类提取到一个数组中。所以我想要这样的结果：
classes=['c1','c2','c3']
我尝试使用正则表达式，但不知道如何对所有单独的类进行分组和收集，以及如何仅将唯一的类提取到数组中？
注意 - 我需要一个普通的 javascript（没有 jquery）解决方案！
【问题讨论】：
标签： javascript html css regex
你可以这样做：
var html = "bla<p class='c1 c2'>blabla<button></button><div id='bla' class='c1 c3'></div>";
var classes = []; // empty array
html.replace(/class=['"][^'"]+/g, function(m){ // https://regex101.com/r/jD0wX1/1
classes = classes.concat(m.match(/[^'"]+$/)[0].split(' ')); // https://regex101.com/r/jD0wX1/2
}); // take all classes
classes = classes.filter(function(item, pos) {
return classes.indexOf(item) == pos;
}); // return unique classes
console.log(classes); // Run code snippet -> then press f12 to see the array希望对你有帮助。
【讨论】：
这不是最漂亮的解决方案，但就是这样。
先将字符串拆分成几部分
var parts = html.split(/class=/);
var classes = [];
for (var i = 0; i < parts.length-1; i++) {
classes[i] = parts[i+1].split(/\'>/)[0].replace(/\'/).trim();
}
【讨论】：
我为你创建了一个正则表达式，用它来玩吧，它适用于 javascript 和 php 正则表达式，希望对你有帮助：https://regex101.com/r/hR5mM0/4，只需将它与 javascript 一起使用：
var re = /class="(.*?)"/g;
var str = 'bla<p class="c1 c2">blabla<button></button><div id="bla" class="c1 c3"></div>';
var m;
var arr = [];
while ((m = re.exec(str)) !== null) {
arr = arr.concat(arr, m[1].split(" ") );
}
arr = arr.filter(function(item, pos, self) {
return self.indexOf(item) == pos;
});
console.log(arr); //["c1", "c2", "c3"]
【讨论】：
绝不是一个漂亮的解决方案，但使用 RegEx 的替代方法是创建一个元素。将 HTML 作为内容提供给它，然后针对它运行一个查询选择器以获取任何具有类的内容。然后，您可以遍历所有元素来填充仅具有唯一类的数组。
(function(){
var html="bla<p class='c1 c2'>blabla<button></button><div id='bla' class='c1 c3 '></div>",
div = document.createElement('div'),
classed,
classes = [],
newClasses;
div.innerHTML = html;
classed = div.querySelectorAll('[class]');
for(var i=0; i < classed.length; i++) {
newClasses = classed[i].className.split(' ');
for (var c = 0; c < newClasses.length; c++) {
if (newClasses[c].trim() !== '' && classes.indexOf(newClasses[c]) === -1) { classes.push(newClasses[c]);
}
}
}
}())
/* classes == ['c1', 'c2', 'c3'] */正如否认的那样，它并不漂亮，但只是我想出的一条替代路线。
【讨论】：
如果对您的事业有帮助，也可以使用 Java：
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Arrays;
import java.util.HashSet;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
//reads in file passed as argument, or called index.html & prints out a list of all classes with dupes removed.
public class CSSApp {
public static void main(String[] args) throws Exception{
byte[] encoded = Files.readAllBytes(Paths.get( (args.length > 0) ? args[0] : "index.html"));
String html = new String(encoded, "UTF-8");
HashSet<String> noDupes = new HashSet<String>();
Matcher m = Pattern.compile("class=['\"](.*?)['\"]")
.matcher(html);
while (m.find()) {
String [] occurences = m.group().replaceAll("class=", "").replaceAll("\"", "").replaceAll("'", "").split("([ ]){1,}");
for(int i = 0; i < occurences.length; i++) {
noDupes.add(occurences[i]);
}
}
String [] classes = noDupes.toArray(new String[] {});
Arrays.sort(classes);
for(int i = 0; i < classes.length; i++) {
System.out.println(classes[i]);
}
}
}
【讨论】：
试试
function extract(html) {
let m= html.match(/class=(".*?"|'.*?')/g)||[]; // class list
let c= m.map(c=>c.replace(/class=("|')\s*/,'').slice(0,-1)); // only names
return [...new Set(c.map(x=>x.split` `).flat())]; // del duplicates
}
// TEST
function print(classList) {
output.value = extract(classList).reduce((a,c) => a+=`.${c} {\n}\n\n`, '')
}<textarea id="inp" cols="70" rows="4" placeholder="Paste html"></textarea>
<br><button onclick="print(inp.value)">Extract CSS!</button><br><br>
<textarea id="output" cols="70" rows="4"></textarea>【讨论】：
基于上面 John Diaz 的回答，这是我的解决方案：
var str = 'bla<p class="c1 c2">blabla<button></button><div id="bla" class=" c1 c3 "></div>';
var classes=getHTMLclasses(str);
console.log(classes);
function getHTMLclasses(html) {
// get all unique css classes in html into dict
var classRegexp = /class=['"](.*?)['"]/g;
var dict = [];
var m;
while ((m = classRegexp.exec(html)))
{
var classes=m[1].replace(/\s+/g, ' ').trim();
classes.split(" ").forEach(function(item) {
dict[item]=true;
});
}
// convert dict to arr
var arr=[];
for (var key in dict) arr.push(key);
return arr;
}
【讨论】：