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

Подсчет слов и знаков с помощью JavaScript

В данном материале вы узнаете как сделать подсчет количества символов, а также слов, где будет автоматически работать 2 счетчика при помощи Javascrip. Есть много разных направлений по тематике ли по своей оригинальной работе, где необходимо подсчитывать количество слов или знаков. Как уже сказано, что данный код вам предоставит в формате онлайн полный подсчет, где есть один минус, это пробел считается за знак. Как пример, вам нужно обязательно вывести то значение или количество знаков, а где то и слов, если работает на бирже ссылок, то во всех этих случаях этот тип счетчика слов будет отличным помощником.

Установка его может происходить на любой отдельной странице, что можно вывести на главную под ссылку, чтоб могли другие также воспользоватся данным подсчетом. Данный счетчик по своим функциям не сложен, где при помощи некоторого количества HTML, а также стилистики CSS можно создать свой стиль, но и безусловно заставить этот проект работать при взаимодействий JavaScript. Что по дизайну, то здесь фон по умолчанию идет светлый, а цвет текста черный, где можно все поменять в CSS. Также вокруг поля была использована тень, чтобы выглядело красиво, но и как то выделялся основной каркас.

Все проверено по работе, где так при установке выглядит данный материал.

Подсчет символов происходит внутри поля textarea на сайте

Установка:

HTML

Код

<div class="osnova-karkasa">
  <div class="sonoye-chislo">
  <div>
  <h5 id="word-sonoye-chislo">0</h5>
  <p>Слова</p>
  </div>
  <div>
  <h5 id="charac-sonoye-chislo">0</h5>
  <p>Знаки</p>
  </div>
  </div>
  <div class="preobrazovatel">
  <textarea
  id="input-textarea"
  rows="12"
  placeholder="Начните печатать здесь..."
  ></textarea>
  </div>
  </div>

CSS

Код

.osnova-karkasa {
position: absolute;
width: 75vmin;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.preobrazovatel {
background-color: #ffffff;
padding: 30px 20px 20px 20px;
border-radius: 0px 0px 8px 8px;
box-shadow: 0 30px 50px rgba(30, 21, 49, 0.3);
}

.sonoye-chislo {
  background-color: #0c3b83;
  width: 100%;
  padding: 10px;
  position: relative;
  display: flex;
  font-family: sans-serif;
  justify-content: space-around;
  text-align: center;
  border-radius: 6px 6px 0px 0px;
}
.sonoye-chislo p {
color: #ceced7;
}
.sonoye-chislo h5 {
color: #ffffff;
font-size: 22px;
}

textarea {
  width: 100%;
  border: none;
  resize: none;
  outline: none;
  font-size: 15px;
  line-height: 24px;
  padding: 8px;
  max-height: 238px;
  color: #0e101a;
  box-shadow: 1px 9px 18px 20px rgb(61 139 190 / 33%);
}

Код

let inputTextArea = document.getElementById("input-textarea");
  let characCount = document.getElementById("charac-sonoye-chislo");
  let wordCount = document.getElementById("word-sonoye-chislo");

  inputTextArea.addEventListener("input", () => {
  characCount.textContent = inputTextArea.value.length;
  let txt = inputTextArea.value.trim();
  wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
  });

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

Демонстрация

19 Февраля 2023 Загрузок: 1 Просмотров: 680 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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