javascript - 如何实时统计Contenteditable div中的字数？

Question

<div class="text" id="text" contenteditable="true"></div>

<div class="words"></div>

每当用户键入 div “文本”，我该如何使输入的字数 显示到div 中？ '单词'。

我希望这是实时的 - 无需刷新页面。

我，即。

<div class="text" id="text" contenteditable="true">Hello world!</div>

<div class="words">2</div>

Answer 1

你可以监听 contenteditable 元素的 input 事件，然后拆分文本并输出数组的长度:

• .trim() 删除字符串开头/结尾的空格。
• .replace(/\s+/g, ' ') 删除连续的空格，这样它就不会被算作一个额外的单词。
• .split(' ') 在空白处拆分字符串，以便检索计数。

作为Andreas points out在评论中，您还可以使用 word boundaries 拆分/匹配文本(/\b/) 以便排除破折号等实体。

$('#text').on('input', function () {
    var text = this.textContent,
        count = text.trim().replace(/\s+/g, ' ').split(' ').length;
    
    $('.words').text(count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text" id="text" contenteditable="true">Text</div>
<div class="words"></div>

没有 jQuery:

document.getElementById('text').addEventListener('input', function () {
    var text = this.textContent,
        count = text.trim().replace(/\s+/g, ' ').split(' ').length;
    
    document.querySelector('.words').textContent = count;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text" id="text" contenteditable="true">Text</div>
<div class="words"></div>