Калькулятор количества символов в тексте на Javascript

Привет. Сегодня разберемся с одной прикольной штуковиной: как сделать калькулятор количества символов в тексте на Javascript. Эта функция постоянно используется для написания текстов для сайтов (потому, что SEO требует, чтобы текста было не меньше чем задано), и довольно часто можно встретить в контактных формах на сайтах, где она используется для индикации «Сколько символов осталось ввести в поле».

Например, подсчет количества введенных символов используется в операционных системах для удаленного подключения к рабочему месту, когда нужно ввести IP адрес удалённого компьютера. Чётко известно, что в окно для удалённого подключения нужно ввести IP адрес в формате IP4, в котором должно быть от 7 до 15 символов (каждый сегмент адреса может быть от 0 до 255, то есть по 3 символа, всего сегментов 4, сегменты разделены точками). Тут подсчет количества введенных символов очень нужен.

Как же сделать калькулатор количества символов в тексте на Javascript

Для этого нужно написать функцию, которая будет получать на вход строку с текстом, удалять из неё лишние символы (пробелы, знаки препинания) и считать количество символов, которые остались.

var charCount=function(text){
  var new_text=text.replace(/[\.,!?; ]*/g, '');
  return new_text.length;
}

В первой строчке функции мы заменяем все знаки пунктуации на пустоту при помощи регулярного выражения, а во второй – рассчитываем количество оставшихся символов и выдаём результат функции.

Всё, функция, которая будет считать символы у нас готова. Давайте теперь сделатем так, чтобы она работала и показывала результат при вводе символов в textarea.

Для этого, напишем HTML код:

Теперь напишем функции на javascript, которые будут обрабатывать ввод текста в textarea и запускать калькулятор количества символов в тексте.

function charCount(text){
  return text.replace(/[\.,!?; ]*/g, '').length;
}
function g(el){
return document.getElementById(el);
}

g('input').onkeyup=function(){
g('label').innerHTML=charCount(this.value);
}

Здесь для удобства мы сделали обертку для функции document.getElementById, чтобы ускорить процесс написания назвали эту фукнцию g().

При нажатии на кнопку в поле textarea (на самом деле, когда эту кнопку уже отпустили), мы получаем значение, которое уже введено в textarea, и запускаем подсчет количества символов. После подсчета выводим данные в label.

Готово.

Для наглядности можно посмотреть на код на jsFiddle.