如何计算所有div中的字符

Question

我需要在所有divs中并且仅在divs中计算字符（不带空格）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
<div>a</div>
<div>b4</div>
<div>52 5</div>
<hr>
<input type='text' value='323'>

</div>

let x = // count characters in all divs;
console.log(x);

在上面的示例中，结果应为6

有什么主意吗？

Answer 1

您可以遍历所有div并获取文本上下文。然后，使用空格将其拆分以获取数组或每个单词，然后将该单词的长度添加到x中以获取所有div中的总字符数。

var x = 0;
$('.parent div').each(function(){
  $(this).text().split(/\s/g).forEach(word => x+=word.trim().length);
});
console.log(x);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
  <div>a</div>
  <div>b4</div>
  <div>52 5</div>
  <hr>
  <input type='text' value='323'>

</div>

Answer 2

获取父文本，然后删除不必要的字符

var originalText = $('.parent').text()
var cleanText = originalText.replace(/[^\w]/g, '')

console.log(cleanText.length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
<div>a</div>
<div>b4</div>
<div>52 5</div>
<hr>
<input type='text' value='323'>

</div>

Answer 3

获取所有没有div的div，并获取其文本。

然后删除空格。

console.log($('div:not(:has(div))').text().replace(/\s/g,'').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
<div>a</div>
<div>b4</div>
<div>52 5</div>
<hr>
<input type='text' value='323'>

</div>

Answer 4

循环parent类，然后找到div；得到length并使用parseInt和+=添加长度，如下所示。

var total = 0;
$('.parent').find('div').each(function(index, element) {
  total += parseInt($(this).text().replace(/\s/g,"").length);
});
console.log(total);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='parent'>
  <div>a</div>
  <div>b4</div>
  <div>52 5</div>
  <hr>
  <input type='text' value='323'>

</div>

Answer 5

使用['Z', 'Z', 'Z'] ['A', 'A'] --------------------------------------------------------------------------- IndexError Traceback (most recent call last) <ipython-input-185-c330b0ebbf1d> in <module>() ----> 1 get_character_distance2('AA','ZZZ') <ipython-input-182-a080de45986e> in get_character_distance2(start, end) 23 24 for item in endList[2]: ---> 25 thirdDistance += (ord(item.upper()) - ord(startList[2])) 26 thirdDistance +=1 27 thirdDistance *= 676 IndexError: list index out of range 中的text()方法从div中获取文本。

如jQuery下方。

现在用空字符替换所有空格

$('.parent').text()

现在获取结果的长度

$('.parent').text().replace(/\s/g,'')

这是完整的演示

$('.parent').text().replace(/\s/g,'').length

console.log($('.parent').text().replace(/\s/g,'').length);

Answer 6

让我们实施.replaceAll()：

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

纯JS解决方案：

var divs = document.getElementsByTagName("div");
var sum = 0;
for (var index = 0; index < divs.length; index++) sum = divs[index].replaceAll(" ", "").length;

jquery解决方案

您可以使用.text()和$("div")

潜在问题

您可能在其他div个内部包含div个。如果是这种情况，那么您要避免多次计算length中的div（当您到达div本身时，以及在读取包装器{{ 1}}）。为此，您将需要使用案件的特定信息来应对情况。