如何在dom中创建一些特定值的字符串？

Question

我有以下HTML：

<div> 
    <i class="fa fa-male ">:Before</i> 
    <i class="fa fa-like">:Before</i> 
</div> 

现在我要作出这样的字符串：male, like。我怎样才能做到这一点？

---

console.log(/fa-([^"]+)/.exec($('div').html()));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
     <i class="fa fa-male ">:Before</i> 
 
     <i class="fa fa-like">:Before</i> 
 
    </div>

Answer 1

您需要循环选择所有图标后。例如是这样的：

var str = $('.fa').map(function() { 
 
    return this.className.match(/fa-([^"]+)/)[1] 
 
}).get() 
 
.join(', ') 
 
    
 
console.log(str)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <i class="fa fa-male">:Before</i> 
 
    <i class="fa fa-like">:Before</i> 
 
</div>

Answer 2

只需在元件使用map迭代和提取物（替换）元件的类名。

var icons = document.getElementsByClassName('fa'); 
 

 
var str = Array.from(icons) 
 
.map(c => c.classList.value.replace('fa fa-', '')) 
 
.join(', ') 
 

 
console.log(str)

<div> 
 
    <i class="fa fa-male">:Before</i> 
 
    <i class="fa fa-like">:Before</i> 
 
</div>