목차
- replace() 예제 - 특정 문자열을 지정 문자열로 대체
- replace() 정의
- replace() 구문
- replace() 예제 - 전역대체
- replace() 예제 - 대소문자 구분 안 하고 전역대체
- replace() 예제 - 대체 텍스트 반환 함수 이용 방법
- replace() 예제 - 특정 라인의 문자열만 대체
- replace() 예제 - 숫자만입력
- replace() 예제 - 숫자 천자리 콤마 자동 표시
- replace() 예제 - 줄바꿈 처리
- replace() 예제 - </p> 태그 뒤에 줄바꿈 코드 없을 시 추가
※ Tab 메뉴 만들 때 유용.
replace() 예제 - 특정 문자열을 지정 문자열로 대체
<p id="demo">Welcome to 홈짱닷컴</p>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var str = document.getElementById("demo").innerHTML;
var res = str.replace("홈짱닷컴", "Homzzang.com");
document.getElementById("demo").innerHTML = res;
}
</script>
결과보기
결과값: Welcome to Homzzang.com
replace() 정의
문자열에서 지정 문자열을 찾아 대체 문자열로 바꾼 새 문자열 반환.
1.
문자열 원본이 바뀌는 것은 아님.
2.
모든 브라우저 지원.
replace() 구문
string.replace(searchValue, newValue)
[매개변수]
searchValue
필수, 찾을 문자열이나 정규표현식 (= 변경 전 문자열)
newValue
필수. 대체 문자열 (= 변경 후 문자열)
[반환값]
지정문자열이 대체문자열로 바뀐 새 문자열 반환.
replace() 예제 - 전역대체
<p id="hz">Homzzang HOMZZANG homzzang</p>
<script>
let str = document.getElementById("hz").innerHTML;
let res = str.replace(/homzzang/g, "홈짱");
document.getElementById("hz").innerHTML = res;
</script>
결과보기
replace() 예제 - 대소문자 구분 안 하고 전역대체
<p id="hz">Homzzang HOMZZANG homzzang</p>
<script>
let str = document.getElementById("hz").innerHTML;
let res = str.replace(/homzzang/gi, "홈짱");
document.getElementById("hz").innerHTML = res;
</script>
결과보기
replace() 예제 - 대체 텍스트 반환 함수 이용 방법
<p id="hz">Homzzang HOMZZANG homzzang</p>
<script>
let text = document.getElementById("hz").innerHTML;
let result = text.replace(/hom|zz|ang/gi, function (x) {
return x.toUpperCase();
});
document.getElementById("hz").innerHTML = result;
</script>
결과보기
replace() 예제 - 특정 라인의 문자열만 대체
※ 3번의 A만 B로 대체
<div id='hz'>
1. A<br>
2. A<br>
3. A<br>
4. A
</div>
<script>
hz.innerHTML = hz.innerHTML.split('3')[0] + '3' + hz.innerHTML.split('3')[1].replace('A', 'B');
</script>
결과보기
비타주리 님 (220810) https://sir.kr/qa/469839
PS. replace() 대신 replaceAll() 사용하면 3번과 4번 둘 다 바뀜.
replace() 예제 - 숫자만입력
https://homzzang.com/b/js-1934
replace() 예제 - 숫자 천자리 콤마 자동 표시
<input type="text" id="price" onkeyup="inputNumberFormat(this)"/>
<script>
function inputNumberFormat(obj) {
obj.value = comma(uncomma(obj.value));
}
function comma(str) {
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
function uncomma(str) {
str = String(str);
return str.replace(/[^\d]+/g, '');
}
</script>
결과보기
replace() 예제 - 줄바꿈 처리
<p id="demo">홈짱닷컴\nHomzzang.com</p>
<script>
var str = document.getElementById("demo").innerHTML;
res = str.replace(/\\n/g, "<br>");
document.getElementById("demo").innerHTML = res;
</script>
결과보기 (※ 주의: 태그 안 문자열 경우, 역슬래시(\)를 1개 더 추가해야 함.)
replace() 예제 - </p> 태그 뒤에 줄바꿈 코드 없을 시 추가
var id = document.getElementById('id');
var html = id.innerHTML;
id.innerHTML = html.replace(/<\/p>([^\n])/g, '</p>\n$1');
PS. jQuery 경우
var $id = $("#" + id);
var html = $id.html();
$id.html(html.replace(/<\/p>([^\n])/g, '</p>\n$1'));
배르만 님 (230930) https://sir.kr/qa/512994
