Javascript 循环浏览更多QuerySelector所有匹配项

我试图从两个不同的ID中提取innerHTML来计算单词数。因此，我使用了带有两个id匹配项的querySelectorAll。我只赢回了第一场比赛。这种方法可能吗

function() {
    var wordCounts;
    var wordCountTemp = document.querySelectorAll("#text-block-10, #text-block-12");
    var i;
    for(i = 0; i < wordCountTemp.length; i++){
    wordCounts = wordCountTemp[i].innerHTML;
    wordCounts.replace(/(^\s*)|(\s*$)/gi,"");
    wordCounts.replace(/[ ]{2,}/gi," ");
    wordCounts.replace(/\n /,"\n");
    return wordCounts.split(" ").length;
    }
}

function（）{
var字数；
var-wordCountTemp=document.queryselectoral（“#text-block-10，#text-block-12”）；
var i；
对于（i=0；i

非常感谢你的帮助

致以最良好的祝愿， 托尼

试试这个：

Array.from(document.querySelectorAll("#text-block-10, #text-block-12"))
  .map(x => x.innerHTML
    .replace(/(^\s*)|(\s*$)/gi,"")
    .replace(/[ ]{2,}/gi," ")
    .replace(/\n /,"\n")
    .split(" ")
    .length)
  .reduce((a, b) => a + b)

试试这个：

Array.from(document.querySelectorAll("#text-block-10, #text-block-12"))
  .map(x => x.innerHTML
    .replace(/(^\s*)|(\s*$)/gi,"")
    .replace(/[ ]{2,}/gi," ")
    .replace(/\n /,"\n")
    .split(" ")
    .length)
  .reduce((a, b) => a + b)

---

在对从函数返回的第一个元素以外的任何元素执行任何操作之前，从函数返回

。此外，如果不修改字符串，它将返回一个新副本。因此，返回的计数是
wordCountTemp[i].innerHTML.split（“”.length
的计数

您的原始代码：（带注释）

您可以直接对
replace
返回的新字符串执行操作，而不是反复将每个
replace
的结果分配给
wordCounts
以逐步修改它：

function countWords() {
    var totalWordCount=0;
    var nodeList = document.querySelectorAll("#text-block-10, #text-block-12");
    for(var i = 0; i < nodeList.length; i++){
        totalWordCount += nodeList[i].textContent
                                     .replace(/(^\s*)|(\s*$)/gi,"")
                                     .replace(/[ ]{2,}/gi," ")
                                     .replace(/\n /,"\n")
                                     .split(" ").length;
    }
    return totalWordCount; //return the total count after all passes through loop
}

注意：以上所有操作都假定
querySelectorAll
返回的元素都不是其他返回元素的子元素。如果是，您将对同一文本计数两次。
在对从函数返回的第一个元素以外的任何元素执行任何操作之前，您将从函数中返回

。此外，如果不修改字符串，它将返回一个新副本。因此，返回的计数是

wordCountTemp[i].innerHTML.split（“”.length

的计数

您的原始代码：（带注释）

您可以直接对

replace

返回的新字符串执行操作，而不是反复将每个

replace

的结果分配给

wordCounts

以逐步修改它：

function countWords() {
    var totalWordCount=0;
    var nodeList = document.querySelectorAll("#text-block-10, #text-block-12");
    for(var i = 0; i < nodeList.length; i++){
        totalWordCount += nodeList[i].textContent
                                     .replace(/(^\s*)|(\s*$)/gi,"")
                                     .replace(/[ ]{2,}/gi," ")
                                     .replace(/\n /,"\n")
                                     .split(" ").length;
    }
    return totalWordCount; //return the total count after all passes through loop
}

---

注意：以上所有操作都假定

querySelectorAll

返回的元素都不是其他返回元素的子元素。如果是，您将对同一文本计数两次。

This

wordCounts=wordCountTemp[i].innerHTML完全覆盖
字数
。您需要初始化为空字符串
var wordCounts=“”
，然后使用
+=
而不是
=
。另外，
.replace（）
不会修改字符串。它返回一个新字符串，替换完成，因此您需要分配该字符串以保留结果。最后，在循环中使用
return
，将保证您总是在第一次迭代中返回。它应该在循环之后。当您使用调试器逐步检查代码时，您发现了什么？顺便问一下，您为什么要尝试这样做？Hi@torazaburo我在Google Tag Manager中以javascript变量的形式编写代码，因此我只能在预览和调试模式下测试代码。在测试每一个步骤时，这可能非常烦人。除此之外，我第一次使用querySelectorAll，不知道是否可以搜索多个匹配项。我正在尝试找出与谷歌分析内容分组相结合的博客文章中哪种字长效果最好完全覆盖
字数
。您需要初始化为空字符串
var wordCounts=“”
，然后使用
+=
而不是
=
。另外，
.replace（）
不会修改字符串。它返回一个新字符串，替换完成，因此您需要分配该字符串以保留结果。最后，在循环中使用
return
，将保证您总是在第一次迭代中返回。它应该在循环之后。当您使用调试器逐步检查代码时，您发现了什么？顺便问一下，您为什么要尝试这样做？Hi@torazaburo我在Google Tag Manager中以javascript变量的形式编写代码，因此我只能在预览和调试模式下测试代码。在测试每一个步骤时，这可能非常烦人。除此之外，我第一次使用querySelectorAll，不知道是否可以搜索多个匹配项。我正在尝试找出哪种字长与谷歌分析内容分组相结合在博客文章中效果最好。这解决了OP代码中的什么问题，如何工作？@Toni2708，这当然更简洁（优雅？）。你应该看一看，试着弄明白。但是，它在所有浏览器的兼容性方面存在重大问题。兼容性/功能支持是编写JavaScript的一个普遍问题，尤其是在使用该语言的较新功能时。您需要检查每个功能与预期运行环境（浏览器和版本）的兼容性。不同浏览器/版本之间的兼容性可能对您并不重要，这取决于您对所编写代码的预期使用。（续）（续）@Toni2708，请参阅以下各页底部的“浏览器兼容性”部分：、和.Hi@Makyen，既然数组未设置为变量，我如何将数组的值返回给函数？在GoogleTagManager中，我被迫将代码放入函数（）{code}。非常感谢@Toni2708，我刚看到这个。我不知道你在问什么。如果您在上述评论中提出的问题仍然相关，请详细说明。这个答案中的代码只是计算数字。你需要添加一些额外的代码来处理这个数字（例如，从函数中返回它，将它分配给变量等等）。这解决了OP代码中的问题，以及如何工作？@Toni2708，这当然更紧凑（优雅？）。你应该看一看，试着弄明白。然而，
function countWords() {
    var allText='';
    var nodeList = document.querySelectorAll("#text-block-10, #text-block-12");
    for(var i = 0; i < nodeList.length; i++){
        allText += ' ' + nodeList[i].textContent;
    }
    //return the total count after getting the textContent from all elements
    return allText.replace(/(^\s*)|(\s*$)/gi,"")
                  .replace(/[ ]{2,}/gi," ")
                  .replace(/\n /,"\n")
                  .split(" ").length;
}