我的任务是计算页面上的字数，而我目前的代码是计算字母数。我完全没有想法。这是它的样子:
var profile_values = document.getElementsByClassName('profile-value');
var total_words = 0;
for (i = 0; i < profile_values.length; i++) {
total_words += profile_values[i].innerHTML.split(' ').length;
}
document.getElementById('word-count').innerHTML = total_words;
<div class="profile-value">
<td>
<p>I am a profile value</p>
</td>
</div>
<div id="stats">
<h3>Stats</h3>
<span id="word-count" class="large">0</span>
<br>words found.
</div>
使用textContent而不是 innerHTML，trim()它，并使用正则表达式拆分任何(序列)空白(包括制表符、换行符……不仅是空格):
total_words += profile_values[i].textContent.trim().split(/\s+/).length;
var profile_values = document.getElementsByClassName('profile-value');
var total_words = 0;
for (i = 0; i < profile_values.length; i++) {
total_words += profile_values[i].textContent.trim().split(/\s+/).length;
}
document.getElementById('word-count').innerHTML = total_words;
<table><tr class="profile-value">
<td>
<p>I am a profile value</p>
</td>
</tr></table>
<div id="stats">
<h3>Stats</h3>
<span id="word-count" class="large">0</span>
<br>words found.
</div>
NB1:td 标签不允许作为 div 的子标签。
NB2:坚持 innerHTML 的解决方案在某些情况下会报告错误的数字，如本例所示:
<table><tr class="profile-value">
<td style="background: yellow">
<p>I am a <font color="red">profile </font> value</p>
</td>
</tr></table>
innerHTML 的解决方案将报告 11 个单词，而实际上仍然只有 5 个。