JavaScript의 문자 수 제한 표시

이 문장의 목적

저는 개인적으로 블로그 사이트를 만들어서 글자의 수를 제한하고 싶어서 조사해 봤는데 의외로 간단해서 글을 쓸 때도 출력을 겸용했습니다.

인상은 이렇습니다.

글이 많은 상황에서 말미는...그렇습니다.

차리다

index.html
omitted.js(약칭 영어)
파일 이름은 자신이 쉽게 이해할 수 있는 것으로 바꿀 수 있다.
논리만 설명하고 싶기 때문에 최소한의 파일 구성이 필요하다.
편집기
필자는 VScode를 사용합니다.좋아하는 편집기를 사용하십시오.

index.>의 제작

원하는 디렉터리를 만듭니다. 디렉터리의 바로 아래에 있는 index입니다.만들다필자는 디렉터리 이름을omitted로 설정합니다.
HTML을 씁니다.
그나저나 VScode 기능으로 해결!키를 누르고 탭을 누르면 큰 프레임을 만들 수 있습니다.
!전환 후 여기에 쓰세요.
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字数制限の実装</title>
</head>
<body>
  <script src="js/omitted.js"></script>
</body>
</html>

omitted.js 만들기

여기까지 하면제작
VScode 기능으로 ns8984:+JS에 링크를 클릭하면 파일을 만들 수 있어 제작이 편리합니다.
다음 내용을 표시하려면 파일 만들기를 누르십시오.

여기까지 하면 HTML에 추가로 기술해 주세요.
가능한 한 간단하게 하기 위해서 나는 두 개의 리 요소만 준비했다.
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字数制限の実装</title>
</head>
<body>
<!-- ここから -->
  <ul>
    <li>テストの文章1です</li>
    <li>テストの文章2ですテストの文章2です</li>
  </ul>
<!-- ここまで追加 -->
  <script src="js/omitted.js"></script>
</body>
</html>

그럼 브라우저에서 확인해 보세요.

아니에요.이번에는 JS의 디스플레이 문자 수 제한에 초점을 맞추기 때문에 스타일을 조정할 수 없습니다.
이렇게 되면 드디어 주제 JS를 쓰게 된다.

JS 설치

먼저 리 요소를 가져온 다음 forEach 문을 사용하여 요소를 하나씩 가져옵니다.
omitted.js

// document.querySelectorAllでli要素を全て取得する。
let contents = document.querySelectorAll('li');
// liは2つあるのでcontentsという変数に格納しました。

// contentsをforEachで一つずつ取得、引数が一つの場合は()を省略できる。(content) => {}の()を省略している。
contents.forEach(content => {
  content.textContent = omittedContent(content.textContent);
  // content.textContentで文字列を取得できる（loop1回目の場合は"テストの文章1です"が入っている)
  // 関数omittedContentに引数としてcontent.textContentを渡しておく。
});

처음 loop은 콘텐츠야.테스트 기사 1얻을 수 있다.
그 값만 변경하면 되기 때문에omitedContentent () 함수를 만들고 이 함수를 대입해서 텍스트 수를 제한합니다.
또한 매개 변수에 리 요소의 내용을 포함하는 문자열을 추가하여 함수에 전달합니다.
(참고) 현재 선언되지 않은 함수 오류가 발생할 수 있습니다.나중에 함수를 발표할 테니 이제 오류에 신경 쓰지 말고 계속 전진하세요.
그럼 함수를 만들기 시작합니다.
omitted.js

//　以下に追加

// 引数でcontent.textContentを受け取る。
function omittedContent(string) {
  // 定数で宣言
  const MAX_LENGTH = 10;

  // もしstringの文字数がMAX_LENGTH（今回は10）より大きかったら末尾に...を付け足して返す。
  if (string.length > MAX_LENGTH) {

    // substr(何文字目からスタートするか, 最大値);
    return string.substr(0, MAX_LENGTH) + '...';
  }
  //　文字数がオーバーしていなければそのまま返す
  return string;
}

substr를 사용하여 문자 수를 제한하고 문자 수가 초과된 경우 끝에서...이(가) 추가되었습니다.
문자 수를 초과하지 않으면 문자열을 되돌려줍니다.

결실

문자 수가 10으로 제한되어 있기 때문에 두 번째 리 요소의 문자열이 생략되었음을 알 수 있다.

JavaScript의 코드(완성)

omitted.js

// document.querySelectorAllでli要素を全て取得する。
let contents = document.querySelectorAll('li');
// liは2つあるのでcontentsという変数に格納しました。

// contentsをforEachで一つずつ取得、引数が一つの場合は()を省略できる。(content) => {}の()を省略している。
contents.forEach(content => {
  content.textContent = omittedContent(content.textContent);
  // content.textContentで文字列を取得できる（loop1回目の場合は"テストの文章1です"が入っている)
});

// 引数でcontent.textContentをstringという変数名で受け取る。
function omittedContent(string) {
  // 定数で宣言
  const MAX_LENGTH = 10;

  // もしstringの文字数がMAX_LENGTH（今回は10）より大きかったら末尾に...を付け足して返す。
  if (string.length > MAX_LENGTH) {

    // substr(何文字目からスタートするか, 最大値);
    return string.substr(0, MAX_LENGTH) + '...';
  }
  //　文字数がオーバーしていなければそのまま返す
  return string;
}

최후

나는 가능한 한 간단하게 하려고 한다.
응용 프로그램에 편입될 때 문장 등이 동적 데이터가 될 수 있기 때문에 window입니다.onload 등으로 페이지를 읽은 후에 사용하십시오.

Reference

이 문제에 관하여(JavaScript의 문자 수 제한 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tetsuyakojima/items/b9fcafd95cbe9e187a85

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)