Javascript统计某个元素的数量

Question

我有一些 javascript return 是一段代码，这段代码包含大部分随机数量的 <li> 元素，示例输出为：

<li class="shiny-box choice clearfix" data-choice-id="0">
    <span class="index">1.</span>
    <span class="val ">vīta vītae f.</span>
    <span class="marking-icon"></span>
</li>
<li class="shiny-box choice clearfix" data-choice-id="1">
    <span class="index">2.</span>
    <span class="val ">patria patriae f.</span>
    <span class="marking-icon"></span>
</li>
<li class="shiny-box choice clearfix" data-choice-id="2">
    <span class="index">3.</span>
    <span class="val ">poena poenae f.</span>
    <span class="marking-icon"></span>
</li>
<li class="shiny-box choice clearfix" data-choice-id="3">
    <span class="index">4.</span>
    <span class="val ">fortūna fortūnae f.</span>
    <span class="marking-icon"></span>
</li>

我需要一个方法，在vanillajavascript到return的数组格式中，内容class=val 跨度。

此代码的输出示例为：

var array = ["vīta vītae f.","patria patriae f.","poena poenae f.","fortūna fortūnae f."];

请记住，并不总是有 4 个 <li> 个元素。

有什么函数可以做到这一点吗？

Answer 1

使用正则表达式：

var rawHTML = '<li class="shiny-box choice clearfix" data-choice-id="0"> <span class="index">1.</span> <span class="val ">vīta vītae f.</span> <span class="marking-icon"></span> </li> <li class="shiny-box choice clearfix" data-choice-id="1"> <span class="index">2.</span> <span class="val ">patria patriae f.</span> <span class="marking-icon"></span> </li> <li class="shiny-box choice clearfix" data-choice-id="2"> <span class="index">3.</span> <span class="val ">poena poenae f.</span> <span class="marking-icon"></span> </li> <li class="shiny-box choice clearfix" data-choice-id="3"> <span class="index">4.</span> <span class="val ">fortūna fortūnae f.</span> <span class="marking-icon"></span> </li>';

var myArray = [];
var myRegexp = /<span class="val ">(.*?)<\/span>/g;
match = myRegexp.exec(rawHTML);
while (match != null) {
  myArray.push(match[1]);
  match = myRegexp.exec(rawHTML);
}

JSFiddle

Answer 2

如果您从字符串开始，您需要先让浏览器将字符串解析为DOM。您可以通过创建一个虚拟 HTML 元素，并将原始 HTML 作为 innerHTML 属性放入其中。然后你就可以使用 querySelectorAll（或 getElementsByClassName，但 QSA 更强大，并且不会实时 collection，所以奖金）搜索它。当你有 collection 个节点时，你可以使用 map 函数来提取 textContent。 NodeList QSA returns 与 map 兼容，但实际上并没有，所以我们必须从数组原型中 "borrow" 它。

请注意，您应该使用 textContent 而不是 innerHTML 来提取字符串，因为如果您的 HTML 中有 "fortūna" 而不是 "fortūna" （两者在HTML中意义相同，但第一个是encoding-agnostic），innerHTML给你前者，textContent给你后者。

var rawHTML = '<li class="shiny-box choice clearfix" data-choice-id="0"> <span class="index">1.</span> <span class="val ">vīta vītae f.</span> <span class="marking-icon"></span> </li> <li class="shiny-box choice clearfix" data-choice-id="1"> <span class="index">2.</span> <span class="val ">patria patriae f.</span> <span class="marking-icon"></span> </li> <li class="shiny-box choice clearfix" data-choice-id="2"> <span class="index">3.</span> <span class="val ">poena poenae f.</span> <span class="marking-icon"></span> </li> <li class="shiny-box choice clearfix" data-choice-id="3"> <span class="index">4.</span> <span class="val ">fortūna fortūnae f.</span> <span class="marking-icon"></span> </li>';

var root = document.createElement('div');
root.innerHTML = rawHTML;
var valNodes = root.querySelectorAll('.val');
var texts = Array.prototype.map.call(valNodes, node => node.textContent);
console.log(texts);

Javascript统计某个元素的数量

Javascript Count the amout of a cetain element

html

javascript

element

html-lists