HTML 및 JS를 사용한 문자 카운터

[clique aqui para português]

텍스트로 작업할 때 텍스트에 포함된 문자 수 또는 단어 수를 알아야 하는 경우가 있습니다. 최근에 비슷한 것이 필요했고 몇 가지 온라인 도구를 사용한 후 내 자신의 캐릭터 카운터를 만드는 것이 재미있을 것이라고 생각했고 그것이 우리가 할 일입니다.

암호

먼저 인터페이스를 만들고 HTML만 사용하여 간단한 작업을 수행합니다.

<h1>Contador de caracteres</h1>

<form name="form_main">
  <fieldset>
    <legend>Contador</legend>
    <label for="text">Texto:</label> <br>
    <textarea name="text" id="text" cols="30" rows="10" oninput="countText()">
    </textarea><br>
    <label for="characters">Caracteres: </label>
    <span id="characters"></span><br>
    <label for="words">Palavras: </label>
    <span id="words"></span><br>
    <label for="rows">Linhas: </label>
    <span id="rows"></span><br>
  </fieldset>
</form>

새 데이터 항목이 있을 때마다 트리거되는 이벤트인 oninput을 사용하는 HTML 구조입니다.

이제 countText 함수를 만들어 보겠습니다.

function countText() {
  let text = document.form_main.text.value;
  document.getElementById('characters').innerText = text.length;
  document.getElementById('words').innerText = text.length == 0 ? 0 : text.split(/\s+/).length;
  document.getElementById('rows').innerText = text.length == 0 ? 0 : text.split(/\n/).length;
}

간단합니다.

데모

아래에서 작업하는 전체 프로젝트를 참조하세요.

유튜브

시청을 선호하는 경우 youtube(PT-BR의 비디오)에서 개발 내용을 확인합니다.

읽어 주셔서 감사합니다!

질문, 불만 사항 또는 팁이 있는 경우 여기에 의견을 남길 수 있습니다. 기꺼이 답변해 드리겠습니다!

😊😊 또 만나요! 😊😊