Привет. Сегодня разберемся с одной прикольной штуковиной: как сделать калькулятор количества символов в тексте на 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.