문자열다루기(19)
-
[JavaScript] 자바스크립트 지정 문자열 변환하기
033_자바스크립트 지정 문자열 변환하기 [적용] 문자열을 다른 문자열로 바꾸고 싶을 때 문자열 내 불필요한 줄바꿈 코드를 로 바꾸고 싶을 때 빈칸을 제거하고 싶을 때 [문법] 메소드 의미 반환 대상문자열.replace(문자열1, 문자열2) 문자열1을 문자열2로 바꾸기 문자열 대상문자열.replace(정규표현, 문자열) 정규 표현으로 문자열 바꾸기 문자열 [내용] 문자열을 다른 문자열로 바꾸고 싶을 때 사용한다.다음의 샘플 코드를 확인해 보자. // image1.png를 image2.png로 바꿈 const imageName = 'image1.png'; imageName.replace('1.png', '2.png'); // image2.png // 문자열 내 줄바꿈 코드를 제거 const inputTex..
2022.05.19 -
[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)
032_자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기) [적용] 위치와 글자 수를 지정한 문자열을 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.substr(시작인덱스, [글자수*]) 지정 범위 내 문자열 추출 문자열 * 글자수는 생략 가능 [내용] substr()은 두 번째 인수에 추출하고 싶은 글자 수를 지정한다. 인덱스 위치와 글자 수를 지정하여 필요한 위치부터 원하는 길이만큼의 문자열을 추출한다. 샘플을 확인해 보자. // 인덱스 시작 위치를 4로 지정하여 6개의 문자를 추출 'JavaScript'.substr(4, 6); // Script 'JavaScript'.substr(4); // Script (글자수를 지정하지 않으면 지정글자 이후를 모두 추출하여 반환) [JavaScrip..
2022.05.19 -
[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)
031_자바스크립트 문자열 다루기 (위치 지정하여 선택하기) [적용] 지정 범위 내의 문자열을 추출하여 사용하고 싶을 때 지정 위치 이후의 문자열을 추출하여 사용하고 싶을 때 [문법] 메소드 의미 반환 문자열.slice(시작인덱스, [종료인덱스*]) 지정 범위 내 문자열 추출 문자열 문자열.substring(시작인덱스, [종료인덱스*]) 지정 범위 내 문자열 추출 문자열 * 종료 인덱스는 생략 가능하다 [내용] 지정한 문자열의 일부를 추출하고 싶을 때 slice(), substring()을 사용한다. 지정한 인덱스의 시작 지점부터 종료 지점까지 문자열을 추출하며, 종료 인덱스를 생각하면 범위는 문자열의 끝까지로 지정된다. 지정한 위치 이후의 문자열을 모두 추출하거나 시작과 종료 인덱스를 지정하여 추출할 ..
2022.05.19 -
[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)
030_자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기) [적용] 지정한 위치의 문자를 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.charAt([인덱스]*) 지정한 인덱스의 문자를 추출 문자 * 인덱스는 생략 가능하다 [내용] 문자열에서 원하는 부분만을 추출할 때 사용한다. charAt()는 지정한 인덱스 위치의 문자를 반환한다. JavaScript 'JavaScript'.charAt(3); // a 'JavaScript'.charAt(); // J(인수 생략 시 기본값은 인덱스 0의 위치) [예시] 검색창에 입력한 글자와 일치하는 검색 결과를 나타내는 샘플을 만들어보자. li 태그를 사용하여 결과를 나타내며, 한글과 영문의 속성을 가진다. charAt()을 사용해 일치하는 결과를..
2022.05.18 -
[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)
029_자바스크립트에서 문자열 검색하기 (부분 검색) [적용] 지정 문자열의 포함 여부를 확인하고 싶을 떄 입력폼의 부적절한 문자를 체크하고 싶을 떄 [문법] 메소드 의미 반환 대상문자열.includes(검색대상문자열, [검색시작인덱스]*) 문자열 포함 여부 확인 진리값 대상문자열.startsWith(검색대상문자열, [검색시작인덱스]*) 문자열 시작 문자 확인 진리값 대상문자열.endsWith(검색대상문자열, [검색시작인덱스]*) 문자열 종료 문자 확인 진리값 * 검색 시작 인덱스는 생략 가능 [내용] includes(), startsWith(), endsWith()를 사용하면 지정 문자열의 포함 여부를 확인할 수 있다. includes()는 위치에 상관없이 지정 문자열이 포함되어 있다면 true를 반환..
2022.05.18 -
[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)
028_자바스크립트에서 문자열 검색하기 (인덱스 검색) [적용] 원하는 문자열의 위치를 확인하고 싶을 때 [문법] 메소드 의미 반환 대상문자열.indexOf(검색대상문자열, [검색시작인덱스*]) 문자열 시작 인덱스 숫자 대상문자열.lastIndexOf(검색대상문자열, [검색시작인덱스*]) 문자열 종료 인덱스 숫자 대상문자열.search(정규표현) 숫자 *검색시작인덱스는 생략가능 [예시1] 문자열 내에서 특정 문자열을 검색할때... indexOf()는 지정한 문자열의 인덱스 위치를 반환하며, 값은 0부터 시작한다. 문자열의 첫 번째 문자는 위치가 0이며, 다섯 번째 문자의 경우 인덱스의 값은 4이다. 문자열을 찾을 수 없는 경우에는 -1이 반환된다. 영문은 대소문자를 구별하여 검색한다. JavaScript..
2022.05.17 -
[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()
027_자바스크립트 문자열의 공백 처리하기 trim() [적용] 문자열 양단의 공백을 제거하고 싶을 때 [내용] 문자열 양 끝의 공백을 제거하는 것을 '트리밍(Trimming)' 이라고 하며, trim()은 양단의 공백을 제거한 문자열을 반환한다. 공백은 스페이스, 탭, 줄바꿈 문자를 의미하며, 양단이 아닌 문자열 사이의 공백은 제거되지 않는다. [문법] 메소드 의미 반환 문자열.trim() 문자열 양 끝의 공백을 제거 문자열 [예시] JavaScript // 양단에 공백이 있을 때 const targetString1 = ' 안녕하세요 '; const trimmedString1 = targetString1.trim(); console.log(trimmdedString1); // 결과: '안녕하세요' //..
2022.05.17 -
[JavaScript] 자바스크립트 문자열의 길이(문자의 수) 확인하기 length()
026_자바스크립트 문자열의 길이(문자의 수) 확인하기 length() [적용] 입력폼에서 문자열의 길이를 확인하고 싶을 때 [문법] 속성 의미 타입 문자열.length 문자열의 길이 (문자의 수) 숫자 Array.from(문자열).length 문자열의 길이 (문자의 수) 숫자 [예시] '문자열.length'로 문자열의 길이(문자의 수) 확인이 가능하다. 다음에서 확인해 보자 JavaScript '노는아빠'.length; // 4 'JavaScript'/length; // 10 [예시2] 텍스트 영역(Textarea)에 입력 중인 문자의 수를 카운팅하는 샘플을 확인해 보자 HTML index.html 현재 0글자를 입력하였습니다. JavaScript main.js /** 텍스트 영역(textarea) *..
2022.05.16 -
[JavaScript] 자바스크립트에서 문자열 다루기
025_자바스크립트에서 문자열 다루기 [적용] 문자열 길이를 확인하고 싶을 때 문자열을 검색하고 싶을 때 문자열을 추출하고 싶을 때 문자열을 변환하고 싶을 때 문자열을 나누고 싶을 때 문자열을 겹합하고 싶을 때 [내용] 문자열은 자바스크립트의 기본 데이터 타입 중 하나. '(작은따옴표), "(큰따옴표), `(백틱)으로 문자열을 감싸며, 타입은 String이다. const a = 'JavaScript'; // 문자열 'JavaScript' const b = "노는아빠"; // 문자열 '노는아빠' const c = `웹디자인`; // 문자열 '웹디자인' 문자열은 다음과 같은 작업등이 가능하다. 속성 내용 예시 문자열.length 문자열 길이를 확인하기 문자열 'JavaScript'의 길이를 구한다 대상문자열..
2022.05.14