[ 자바스크립트 ] 정규식 ─ search, test, replace

최종 수정일 : 2015. 9. 25.

자바스크립트의 정규식에서 자주 사용되는 search(), test(), replace()에 대해서 알아보자.

도움받은 곳 : w3schools

---

search() ㅡ 검색된 문자열의 위치값을 내놓는다. (전체 문자열에서 몇번째에 있는지)

⑴ search()를 사용하는 기본 예문

아래 예문은, "Please visit Tistory! "이라는 전체 문장(문자열)에서
"Tistory"라는 낱말(문자열)이 몇 번째에 위치해 있는지를 알려준다.

 
<button onclick="getPosition()">클릭하세요</button>

<p id="demo"></p>

<script type="text/javascript">

function getPosition (){ 
	 var string = "Please visit Tistory! "; 
	 var position = string.search( "Tistory" ); 
	 demo.innerHTML = position; 
} 

</script>
 

<p id="demo"> </p>

위의 내용으로 실행되는 과정은, 다음과 같다.

1. 변수 string에는 (검색 대상이 될) 전체 문자열이 들어있다.
2. 찾으려는 문자열은 "Tistory"이며, search()를 이용하여 그 위치를 찾는다.
3. 검색에 성공하면, 해당 단어(Tistory)의 위치값이 변수 position에 저장된다.
   해당 단어가 없으면, 변수 position에 저장되는 숫자는 -1이다.
4. 최종적으로, 변수 position에 저장된 숫자를 문서에 집어넣는다.

search()의 위치값은, 제로(0)에서부터 계산해 나간다.
위의 문장 "Please visit Tistory!"에서, 맨 처음 알파벳 P의 위치값은 0 이다.
거기서부터 하나하나 세어보면, "Tistory"의 첫번째 알파벳 T가 13번째에 있음을 알게 된다.
이 위치값에는, 띄어쓰기한 빈칸(공백)도 포함된다.

⑵ search()에서 정규식을 사용해보기

 
<button onclick="getPosition()">클릭하세요</button>

<p id="p_tag">Please visit Tistory! </p>

<p id="demo"></p>

<script type="text/javascript">

function getPosition (){ 
	 var string = p_tag.innerHTML; 
	 var regExp = /Tistory/; 
	 var position = string.search( regExp ); 
	 demo.innerHTML = position; 
} 
</script>
 

<p id="p_tag">Please visit Tistory! </p>

<p id="demo"> </p>

위의 내용을 작성한 방법은, 다음과 같다.

1. 변수 string에는, 태그에 들어있는 전체 문장을 넣는다.
2. 변수 regExp에는, 검색 방법으로 정규식을 넣는다.
3. 변수 position에는, 검색된 단어의 위치값을 넣는다.
4. 최종적으로, 변수 position에 들어간 숫자값을, 문서에 삽입한다.

---

test() ㅡ 찾는 문자열이, 들어있는지 아닌지를 알려준다.

⑴ 문장 안에 찾으려는 문자가 들어있으면, 결과는 "true"이다.

 
<button onclick="checkingExists()">클릭하세요</button>

<p id="p_tag">Please visit Tistory! </p>

<p id="demo"></p>

<script type="text/javascript">

function checkingExists (){
	var string = p_tag.innerHTML; 
	var reg = /story/; 
	var testing = reg.test( string ); 
	demo.innerHTML = testing; 
}
</script> 

<p id="p_tag">Please visit Tistory! </p>

<p id="demo"> </p>

⑵ 문장 안에 찾으려는 문자가 없으면, 결과는 "false"이다.

 
<button onclick="checkingExists()">클릭하세요</button>

<p id="p_tag">Please visit Tistory!</p>

<p id="demo"></p>

<script type="text/javascript">

function checkingExists (){ 
	var string = p_tag.innerHTML; 
	var reg = /world/;
	var testing = reg.test( string );
	demo.innerHTML = testing; 
}
</script> 

<p id="p_tag">Please visit Tistory! </p>

<p id="demo"> </p>

---

replace() ㅡ 문자열의 일부를 다른 문자열로 바꿀 때 사용한다.

⑴ replace()를 사용하는 기본 예문

아래 내용은, replace()를 이용하여, "Tistory"를 "Naver"로 바꾼 것이다.

 
<button onclick="changeString()"> 교체하기 </button>

<p id="p_tag">Please visit Tistory! </p>

<script type="text/javascript">

function changeString (){ 
	var string = p_tag.innerHTML; 
	var change = string.replace( "Tistory" , "Naver" );

	pTag.innerHTML = change; 
}
</script> 

Please visit Tistory!

⑵ 정규식을 이용하여 "Tistory"를 "Naver"로 교체하기

 
<button onclick="changeString()">교체하기</button>

<p id="p_tag">Please visit Tistory! </p>

<script type="text/javascript">

function changeString (){ 
	var string = p_tag.innerHTML; 
	var change = string.replace( /Tistory/ , "Naver" );

	p_tag.innerHTML = change; 
}
</script> 

Please visit Tistory!

이 내용이 도움이 되셨나요? *^^*