2022. 5. 18. 14:16ㆍProgram/JavaScript
030_자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)
[적용]
- 지정한 위치의 문자를 추출하고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| 문자열.charAt([인덱스]*) | 지정한 인덱스의 문자를 추출 | 문자 |
* 인덱스는 생략 가능하다
[내용]
문자열에서 원하는 부분만을 추출할 때 사용한다.
charAt()는 지정한 인덱스 위치의 문자를 반환한다.
JavaScript
'JavaScript'.charAt(3); // a
'JavaScript'.charAt(); // J(인수 생략 시 기본값은 인덱스 0의 위치)[예시]
검색창에 입력한 글자와 일치하는 검색 결과를 나타내는 샘플을 만들어보자.
li 태그를 사용하여 결과를 나타내며, 한글과 영문의 속성을 가진다.
charAt()을 사용해 일치하는 결과를 체크하고, 일치하지 않는 항목은 hide 클래스를 이용해서 숨기도록 한다.
hide는 CSS에서 'display: none;'을 지정하여 숨기는 역할을 한다.
HTML index.html
<body>
<header>
<label> 지역명의 첫 번째 글자를 입력해 주세요. <input id="search-word-input" maxlength="1" type="text"></label>
</header>
<div id="prefecture-list">
<button data-name="속초" data-phonetic="sokcho">속초</button>
<button data-name="부산" data-phonetic="busan">부산</button>
<button data-name="포항" data-phonetic="pohang">포항</button>
<button data-name="상주" data-phonetic="sangju">상주</button>
<button data-name="서울" data-phonetic="seoul">서울</button>
<button data-name="제주" data-phonetic="jeju">제주</button>
.
.
[생략]
JavaScript main.js
/** 검색어 */
const searchWordText = document.querySelector('#search-word-input');
/** 지역 리스트 */
const prefectureList = document.querySelectorAll('#prefecture-list button');
// 문자가 입력될 때마다 데이터 체크 작업 실행
searchWordText.addEventListener('keyup', () => {
// 입력한 검색어
const searchWord = searchWordText.value;
// 지역 리스트의 루프 처리
// element는 각 요소에 해당함
prefectureList.forEach((element) => {
// 검색어가 없으면 모든 요소를 표시
if (!searchWord || searchWord === '') {
element.classList.remove('hide');
return;
}
// 데이터 name 가져오기
const prefectureName = element.dataset.name;
// 데이터 영문 name 가져오기
const phonetic = element.dataset.phonetic;
// 검색어와 첫 번째 글자 일치 여부에 따라 hide 클래스 사용 결정
// hide 클래스가 사용된 요소는 화면에 표시하지 않음
if (
searchWord.charAt(0) === prefectureName.charAt(0) || searchWord.charAt(0) === phonetic.charAt(0)
) {
// 검색어의 첫 번째 글자가 일치하는 경우 hide 클래스를 제거
element.classList.remove('hide');
} else {
// 검색어의 첫 번째 글자가 일치하지 않는 경우 hide 클래스를 추가
element.classList.add('hide');
}
});
});[JavaScript] 자바스크립트에서 문자열 다루기
[JavaScript] 자바스크립트에서 문자열 다루기
025_자바스크립트에서 문자열 다루기 [적용] 문자열 길이를 확인하고 싶을 때 문자열을 검색하고 싶을 때 문자열을 추출하고 싶을 때 문자열을 변환하고 싶을 때 문자열을 나누고 싶을 때 문자열
stonefree.tistory.com
[JavaScript] 자바스크립트에서 문자열의 길이(문자의 수)를 확인하고 싶을때 length()
[JavaScript] 자바스크립트 문자열의 길이 확인하기
026_자바스크립트 문자열의 길이 확인하기 [적용] 입력폼에서 문자열의 길이를 확인하고 싶을 때 [문법] 속성 의미 타입 문자열.length 문자열의 길이 (문자의 수) 숫자 Array.from(문자열).length 문자열
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()
[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()
027_자바스크립트 문자열의 공백 처리하기 [적용] 문자열 양단의 공백을 제거하고 싶을 때 [내용] 문자열 양 끝의 공백을 제거하는 것을 '트리밍(Trimming)' 이라고 하며, trim()은 양단의 공백을 제거
stonefree.tistory.com
[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)
[JavaScript] 자바스크립트에서 문자열(인덱스) 검색하기
const targetString = 'JavaScript를 배우자'; document.querySelector('.result1').innerHTML = targetString.indexOf('JavaScript'); document.querySelector('.result1').innerHTML = targetString.indexOf('배..
stonefree.tistory.com
[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)
[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)
029_자바스크립트에서 문자열 검색하기 (부분 검색) [적용] 지정 문자열의 포함 여부를 확인하고 싶을 떄 입력폼의 부적절한 문자를 체크하고 싶을 떄 [문법] 메소드 의미 반환 대상문자열.includes(
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)
[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)
031_자바스크립트 문자열 다루기 (위치 지정하여 선택하기) [적용] 지정 범위 내의 문자열을 추출하여 사용하고 싶을 때 지정 위치 이후의 문자열을 추출하여 사용하고 싶을 때 [문법] 메소드 의
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)
[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)
032_자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기) [적용] 위치와 글자 수를 지정한 문자열을 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.substr(시작인덱스, [글자수*]) 지정 범위
stonefree.tistory.com
[JavaScript] 자바스크립트 지정 문자열 변환하기
[JavaScript] 자바스크립트 지정 문자열 변환하기
033_자바스크립트 지정 문자열 변환하기 [적용] 문자열을 다른 문자열로 바꾸고 싶을 때 문자열 내 불필요한 줄바꿈 코드를 로 바꾸고 싶을 때 빈칸을 제거하고 싶을 때 [문법] 메소드 의미 반환
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열 나누기
[JavaScript] 자바스크립트 문자열 나누기
034_자바스크립트 문자열 나누기 [적용] URL의 해시(Hash) 데이터르르 가져올 때 공백을 기준으로 문자열을 나누고 싶을 때 [문법] 메소드 의미 반환 문자열.split([기준문자*], [최대분할수*]) 지정
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열 합치기
[JavaScript] 자바스크립트 문자열 합치기
035_자바스크립트 문자열 합치기 [적용] 따로 입력받은 성과 이름을 결합하여 문자열을 만들고 싶을 때 폴더명과 파일명을 결합하여 파일 주소를 문자열로 만들고 싶을 때 [문법] 구문 의미 문자
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열의 대소문자 변환하기
[JavaScript] 자바스크립트 문자열의 대소문자 변환하기
036_자바스크립트 문자열의 대소문자 변환하기 [적용] 소무자를 대문자로 변환하고 싶을 때 서버에서 반환된 대문자 데이터를 소문자로 변환하고 싶을 때 [문법] 메소드 의미 반환 문자열.toLowerCa
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열과 식 함께 다루기
[JavsScript] 자바스크립트 문자열과 식 함께 다루기
037_자바스크립트 문자열과 식 함께 다루기 [적용] 여러 문자열을 다루고 싶을 때 문자열 내 변수를 다루고 싶을 때 [문법] 구문 의미 문자열 + 문자열 + ... 문자열 결합 `${문자열1}${문자열2}${문자
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)
038_자바스크립트 문자열 다루기 (정규 표현식 사용하기) [적용] 조건과 일치하는 문자열을 검색하고 싶을 때 많은 문자열을 패턴에 따라 일괄적으로 변환하고 싶을 때 [내용] 정규 표현을 사용하
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)
[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)
039_자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기) [적용] 조건과 일치하는 문자열을 검색하고 싶을 떄 [문법] 메소드 의미 반환 /패턴/.test(문자열) 문자열과 패턴의 일치 여
stonefree.tistory.com
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기) (0) | 2022.05.19 |
|---|---|
| [JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기) (0) | 2022.05.19 |
| [JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색) (0) | 2022.05.18 |
| [JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색) (0) | 2022.05.17 |
| [JavaScript] 자바스크립트 문자열의 공백 처리하기 trim() (0) | 2022.05.17 |