ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Скрипт подсчета символов онлайн для сайта

Скрипт подсчета символов онлайн для сайта

Скрипт подсчета символов онлайн для сайта
Здесь представлен полноценный скрипт, который ставится на сайт для подсчета количества символов или знаков, а также слов в описание текста. Он идет как отдельная страница на ресурсе, где ее создаем, и выставляем код со стилем, и также скрипт. Что в дальнейшем выводим ссылку на главную страницу или в специальный раздел, где к примеру у вас уже находится не первый такой агрегат. По своему функционалу данный подсчет идет четко, также подсчитываются пробелы, знаки и слова, и все отдельно.

Думаю многие встречали на разных сайтах, к примеру онлайн подсчет слов в тексте, теперь вы можете разместить на своем портале. Если у других пробелы считались за знаки, то здесь вы точно не ошибетесь, где рекомендую для начало ознакомится с функциями на demo странице. Но и не кто не запрещает выставить нужную вам стилистику, ведь здесь предусмотрены стили для оформление. Главное, это в сам код не лести, ведь он уже настроен, но а дизайн сами можете выбрать, тот, что соответствует сайту.

Установка:

HEAD

Код
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Код
<div class="container">
  <div class="row">
  <div class="col-lg-12 text-center text-light">
  <h1>Подсчет символов онлайн</h1>
  <h3 class="text-warning">Вставьте текст в поле (Ctrl+V)</h3>
  </div>
  </div>
  <div class="row justify-content-center">
  <div class="col-md-8">
  <form>
  <div class="form-group">
  <textarea name="name" id="text" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-control" cols="30" rows="10" value="rex" autofocus=""></textarea>
  </div>
  </form>
  </div>
  </div>
  <div class="row mt-2 justify-content-center">
  <div class="col-md-5 text-light white-txt">
  <div id="alltext"><b>Всего символов:</b> <h5 class="badge badge-primary">0</h5></div>
  <div id="nospaces"><b>Символов без пробелов:</b> <h5 class="badge badge-success">0</h5></div>
  <div id="words"><b>Количество слов:</b> <h5 class="badge badge-warning">0</h5></div>
  </div>
  <div class="col-md-3">
  <button class="btn btn-success mybtn mt-3 mb-3">Очистить форму</button>
  </div>
  </div>
  </div>

CSS

Код
body {
  background: url(Здесь идет ссылка изображение на фон страницы);
  background-size: cover;
  background-repeat: no-repeat;
}

  .col-md-5.text-light.white-txt {
  font-size: 18px;
}

JS

Код
$().ready(function() {
  $("#text").on('input', function() {
  text = $("#text").val();
  alltext = text.length;
  nospaces = text.split(' ').join('').length;
  words_pr = text.replace(/^\.*/, '').replace(/\.|\,/g, ' ').replace(/^\s*/, '').replace(/\s*$/, '');
  words = words_pr.split(/[\s]+/).length;
  if (text.length == 0) words = 0;
  $("#alltext h5").html(alltext);
  $("#nospaces h5").html(nospaces);
  $("#words h5").html(words);
  return false;
  });

$('.mybtn').click(function(){
  $('#alltext h5').html(0);
  $('#nospaces h5').html(0);
  $('#words h5').html(0);
  $('form').trigger("reset");
})
});

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

Демонстрация
11 Апреля 2023 Загрузок: 1 Просмотров: 609 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar