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

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

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

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

Установка:

HEAD

Код

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;
}

Код

$().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 Загрузок: 2 Просмотров: 757 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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