2022. 5. 19. 12:57ㆍProgram/JavaScript
033_자바스크립트 지정 문자열 변환하기
[적용]
- 문자열을 다른 문자열로 바꾸고 싶을 때
- 문자열 내 불필요한 줄바꿈 코드를 <br>로 바꾸고 싶을 때
- 빈칸을 제거하고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| 대상문자열.replace(문자열1, 문자열2) | 문자열1을 문자열2로 바꾸기 | 문자열 |
| 대상문자열.replace(정규표현, 문자열) | 정규 표현으로 문자열 바꾸기 | 문자열 |
[내용]
문자열을 다른 문자열로 바꾸고 싶을 때 사용한다.다음의 샘플 코드를 확인해 보자.
// image1.png를 image2.png로 바꿈
const imageName = 'image1.png';
imageName.replace('1.png', '2.png'); // image2.png
// 문자열 내 줄바꿈 코드를 제거
const inputText = '노는\n-아빠';
inputText.replace('\n], ''); // 노는-아빠
replace()의 첫 번째 인수가 문자열인 경우 검색 중 처음으로 발견되는 문자열만 변경한다.
예를 들어, 010-1234-5678의 전화번호에서 하이픈(-)을 제거하고자 다음과 같은 코드를 사용해도 기대한 결과를 확인할 수 없다.
let phoneNumber = '010-1234-5678'
phoneNumber.replace('-', ''); // 0101234-5678
정규 표현을 사용하여 g옵션(문자열 전체 일치 검색)을 지정하면 의도한 작업이 가능하다.
phoneNumber.replace(/-/g, '');
// 01012345678[예시]
텍스트 영역에 입력한 전화번호의 하이픈(-)을 제거하는 샘플을 확인해 보자.
해당 기능을 사용하면 입력폼에서 전화번호를 입력할 때 하이픈(-)유무와 상관없이 작업이 가능하다.
HTML index.html
<body>
<input id="phoneNumberText" placeholder="전화번호" type="tel">
<p class="caption">
<small>* 실제로 데이터는 전송되지 않음</small>
</p>
<button id="submitButton" type="submit">데이터 전송</button>
</body>JavaScript main.js
// #submitButton 클릭 시의 처리 작업 설정
document.querySelector('#submitButton').addEventListener('click', (event) => {
// 전화번호 가져오기
const phoneNumber = document.querySelector('#phoneNumberText').value;
// 전화번호에 하이픈(-)이 삽입된 경우 ''(공백)으로 변환
const trimmedPhoneNumber = phoneNumber.replace(/-/g, '');
// 01012345678
alert(`전화번호는 ${trimmedPhoneNumber}입니다.`)
// 버튼의 기본 작동을 해제
event.preventDefault();
});
실행 결과
* '010-1234-5678'을 입력하고 전송 버튼을 누르면 하이픈(-)이 제거된 전화번호가 알림창에 표시된다.
[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] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)
030_자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기) [적용] 지정한 위치의 문자를 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.charAt([인덱스]*) 지정한 인덱스의 문자를
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열에서 문자 다루기 (위치 지정하여 선택하기)
[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)
031_자바스크립트 문자열 다루기 (위치 지정하여 선택하기) [적용] 지정 범위 내의 문자열을 추출하여 사용하고 싶을 때 지정 위치 이후의 문자열을 추출하여 사용하고 싶을 때 [문법] 메소드 의
stonefree.tistory.com
[JavaScript] 자바스크립트 문자열에서 문자 다루기 (글자수 지정하여 선택하기)
[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)
032_자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기) [적용] 위치와 글자 수를 지정한 문자열을 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.substr(시작인덱스, [글자수*]) 지정 범위
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.20 |
|---|---|
| [JavaScript] 자바스크립트 문자열 나누기 (0) | 2022.05.19 |
| [JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기) (0) | 2022.05.19 |
| [JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기) (0) | 2022.05.19 |
| [JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기) (0) | 2022.05.18 |