8 мая, 2014 
Alexjc 
В этой статье я расскажу о подсчете количества символов в строке, текстовом поле, или блоке textarea, а так же сделаем форму для подсчета символов.
Сейчас активно набирает обороты услуги написания текстов для сайта — Копирайтинг. Многие люди в поисках удаленной работы (фрилансе) начинают заниматься копирайтингом. Форма для подсчета количества символов в копирайтинге немножко отличается от обычного подсчета, т.к. пробелы и другие невидимые знаки в ней не учитываются, и стоимость написанной статьи считается за 1000 символов с учётом пробелов. Но мы сделаем подсчет количества символов с расчетом стоимости написания статьи, и с возможностью просчета без пробелов, и с пробелами.
Начнем с малого, в JavaScript для подсчета количества символов в строке, используется свойство length. Вот небольшой примерчик:
|
1 2 3 4 |
<script type="text/javascript"> var string = "www.webinit.ru - сайт на котором можно найти ответы на многие вопросы по дизайну и программированию"; alert(string.length); </script> |
В данном примере на экран выведется сообщение, с количеством символов в строке (строка хранится в переменной string).
Теперь усложним алгоритм, и сделаем форму с подсчетом стоимости:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<html> <head> <title>Количество символов JavaScript | www.webinit.ru</title> </head> <body> <script type="text/javascript"> /** * Подсчет количества символов и стоимость написание текста в JavaScript * @author www.webinit.ru дизайн студия **/ var price = 400; //Цена за 1000 символов function countChar() { //Записываем ссылки на элементы в переменные var is_probel = document.getElementById("is_probel"); var count_char = document.getElementById("count_char"); var count_char_textarea = document.getElementById("count_char_textarea"); var price_out = document.getElementById("price_out"); //Если не стоит галочка на "Учитывать пробелы" if (is_probel.checked == false) { //Записываем количество символов textarea (без пробелов) в текстовое поле //replace(/ *\n*\r*\t*/g, "").length - означает, что вначале обрезаем все //пробелы и невидимые знаки, а потом считаем кол-во символов count_char.value = count_char_textarea.value.replace(/ *\n*\r*\t*/g, "").length; } else { //Если стоит галочка на "Учитывать пробелы" //Записываем количество символов textarea в текстовое поле count_char.value = count_char_textarea.value.length; } //Считаем price_out.innerHTML = (parseInt(count_char.value) / 1000) * price; } </script> <div id="count_char_block"> <textarea id="count_char_textarea" style="width: 600px;height: 300px;" onchange="countChar()" onkeyup="countChar()" ></textarea><br/> <input type="text" id="count_char" value="0" readonly="readonly" /> <input type="checkbox" id="is_probel" onchange="countChar()" /> <label for="is_probel">Учитывать пробелы</label> <div>Стоимость написания текста составит: <span id="price_out">0</span> руб.</div> </div> </body> </html> |
Код весьма простой, но это упростит работу копирайтера в написании и заказчика в проверке статей..
Posted in 