[책] 자바스크립트 코드 레시피 278 - 23일차

문자열의 공백 처리하기

• 문자열 양단의 공백을 제거하고 싶을 때

구문

  ' 문자열 '.trim();

실습

문자열 양 끝의 공백을 제거합니다. 콘솔창에서 문자열 드래그해서 확인해보면 공백 제거된 값이 나옵니다.

  const targetString = '안녕하세요 공백     ';
  console.log(targetString);
  console.log(targetString.trim());

줄바꿈 문자가 삽입되어 있는 경우 공백을 제거합니다.

  const targetString = '안녕하세요 공백\n ';
  console.log(targetString);
  console.log(targetString.trim());

문자열 사이의 공백은 제거되지 않습니다.

  const targetString = '안녕하세요 공백 ';
  console.log(targetString);
  console.log(targetString.trim());

문자열 검색하기 ( 인덱스 검색 )

• 원하는 문자열의 위치를 확인하고 싶을 때

구문

  '문자열'.indexOf(검색대상문자열, [검색시작인덱스]);
  '문자열'.lastIndexOf(검색대상문자열, [검색시작인덱스]);
  '문자열'.search(정규표현);

실습

반환값은 숫자로 나옵니다. 우선 그림부터 보고 코드를 보면 도움이 됩니다.

indexOf(검색대상문자열, [검색시작인덱스]) 찾고자 하는 앞 글자의 숫자를 반환합니다.

  const myString = 'javascript를 배우자';
  const a = myString.indexOf('javascript'); // 결과 0
  const b = myString.indexOf('배우자'); // 결과 12

lastIndexOf(검색대상문자열, [검색시작인덱스]); 찾고자 하는 문자열에서 마지막으로 보이는 글자의 숫자를 반환합니다.

  const myString = 'javascript and java;
  const a = myString.lastIndexOf('v'); // 결과 17
  const b = myString.lastIndexOf('a'); // 결과 18

찾고자하는 문자열이 없을 때 -1 로 반환하고, 대소문자를 구별합니다.

  const myString = 'javascript and java;
  const a = myString.lastIndexOf('h'); // 결과 -1
  const b = myString.lastIndexOf('J'); // 결과 -1

인덱스를 지정하면 지정한 위치부터 문자열을 검색하고 찾으면 숫자를 반환합니다. 문자열이 없으면 -1 숫자로 반환합니다.

  const myString = 'javascript';
  const a = myString.indexOf('r', 4); // 결과 6
  const b = myString.indexOf('a', 4); // 결과 -1

텍스트 일부분을 indexOf( ) 사용해서 가져오기

코드를 통해 인덱스 검색의 결괏값을 가져옵니다.

index.html

<div>
  <h1>'JavaScript를 배우자'의 인덱스</h1>
  <p class="desc">자바스크립트(JavaScript)를 배워서 프로젝트(Project) 해보기</p>
</div>

script.js

window.onload = function () {
  const desc = document.querySelector('.desc');
  console.log(desc);

  const JavaScript =  desc.textContent.indexOf('JavaScript');
  console.log(JavaScript);

  const Project =  desc.textContent.indexOf('Project');
  console.log(Project);
};