Question

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

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

每当用户输入div'文字'时，我该怎么做才能使输入的字的数量显示在div'字'中。

我希望这是实时的 - 没有页面刷新。

I，即

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

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

Answer 1

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

.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>

Answer 2

这样做......

$(document).ready(function(){
    $("#text").keyup(function(){

      var text = $(this).text().replace(/\s{2,}/g, ' ');
      var num = text.split(" ").length;
      $(".words").html(text);

    });
});

如何实时计算Contenteditable div中的单词数？

2 个答案: