[String] JS - replace() 메서드(String용) ★ - 문자열 대체 (= replace메서드 = 리플레이스메서드) ※ 문자열대체/문자열교체/문자열바꾸기 ※ 천자리 자동 콤마 표시 ※ 줄바꿈 처리

1. replace() 예제 - 특정 문자열을 지정 문자열로 대체
2. replace() 정의
3. replace() 구문
4. replace() 예제 - 전역대체
5. replace() 예제 - 대소문자 구분 안 하고 전역대체
6. replace() 예제 - 대체 텍스트 반환 함수 이용 방법
7. replace() 예제 - 특정 라인의 문자열만 대체
8. replace() 예제 - 숫자만입력
9. replace() 예제 - 숫자 천자리 콤마 자동 표시
10. replace() 예제 - 줄바꿈 처리
11. 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