Question

我有一些javascript返回一大块代码，此代码包含大多数随机数量的<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>

我需要一种方法，在 vanilla javascript中以数组格式返回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功能更强大，并且不会进行实时收集，因此可以获得奖金。如果有一组节点，则可以使用map函数来提取textContent。 QSA返回的NodeList与map兼容，但实际上并没有，所以我们必须＆＃34;借用＆＃34;它来自阵列原型。

请注意，您应该使用textContent而不是innerHTML来提取字符串，因为如果HTML中有"fortūna"而不是"fortūna"（两者都有HTML中的含义相同，但第一个是编码不可知的，innerHTML会给你前者，textContent会给你后者。

＆＃13;

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);

＆＃13;

Javascript计算一个cetain元素的amout

2 个答案: