Có nhiều lý do khác nhau mà ứng dụng web có thể muốn thu thập thông tin đầu vào từ người dùng. Tuy nhiên, đôi khi bạn muốn giới hạn lượng đầu vào mà bạn nhận được từ người dùng của mình. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo bộ đếm từ trong JavaScript và ngăn người dùng nhập thêm bất kỳ thông tin nào khi họ đạt đến giới hạn.

Giả sử bạn có<textarea> và bạn muốn truy xuất thông tin về số lượng:

• Characters (toàn bộ)

• Characters (không có khoảng trắng)

• Words

• Lines

function wordCount ( val ){

var wom = val.match(/\S+/g);

return {

charactersNoSpace : val.replace (/\s + /g , ‘ ‘ ).length,

characters : val.length, 

words : wom ? wom . length : 0,

line : val.split (/\r*\n/).length

};

}

// Sử dụng: 

wordCount( someMultilineText ).words; // (Số từ)

Ví dụ đầy đủ

• HTML

<textarea id="text"></textarea>

<div id="result"></div>

• JavaScript + jQuery 2.1.0

function wordCount( val ){

    var wom = val.match(/\S+/g);

    return {

        charactersNoSpaces : val.replace(/\s+/g, '').length,

        characters         : val.length,

        words              : wom ? wom.length : 0,

        lines              : val.split(/\r*\n/).length

    };

}

var textarea = document.getElementById("text");

var result   = document.getElementById("result");

textarea.addEventListener("input", function(){

  var v = wordCount( this.value );

  result.innerHTML = (

      "<br>Characters (no spaces):  "+ v.charactersNoSpaces +

      "<br>Characters (and spaces): "+ v.characters +

      "<br>Words: "+ v.words +

      "<br>Lines: "+ v.lines

  );

}, false);

Tham khảo GoalKicker.com

Dịch: Devmaster Academy