[자바스크립트] 동일한 단어를 문자열에서 찾기, Match() 함수

[자바스크립트] 동일한 단어를 문자열에서 찾기, Match() 함수

[자바스크립트] 동일한 단어를 문자열에서 찾기, Match() 함수

 23764

 

자바스크립트의 match() 함수에 대하여 알아보려합니다. match() 함수는 특정 텍스트 안에 검색할 단어,  찾고 싶은 단어가 있는경우 해당 텍스트가 문구에 포함되어 있는지 확인할 수 있습니다. 또한 단어뿐만 아니라 정규표현식을 사용하여 특정 패턴을 검색하는 것 역시 가능합니다. 아래는 match() 함수를 사용하는 간단한 방법입니다.

해당 문자열.match('찾을 단어')
// match()함수는 인자에 포함된 문자를 찾으면 이를 반환함

특정 텍스트를 검색, 찾기 위한 방법은 여러가지가 있습니다. indexOf() 함수를 사용하는 방법도 많이 쓰이는 방법중 하나입니다. 단, indexOf()의 경우 위치값을 index로 반환하기 때문에 위치 확인을 위한 방법등의 간단한 기능 구현등에 사용됩니다. webisfree.com 역시 match() 함수를 사용하고 있습니다. 현재 접속된 방문자의 접속 url을 확인하여 en이 들어가 있는 경우 영문 페이지로 인식하여 영문에 맞는 콘텐츠를 보여주기 위해 사용하고 있습니다. 이처럼 match() 함수를 활용할 경우 다양한 기능 구현이 가능하게 됩니다. 그럼 아래의 예제를 통해 좀 더 상세하게 알아보세요.

! match() 함수 예제 소스 코드보기

아래는 현재 페이지의 파라미터(쿼리스트링)에 'en.'이 포함되어 있는지를 확인하여 영문 페이지인지 한글 페이지인지 알려주는 코드입니다. 현재 webisfree.com의 영문사이트는 http://webisfree.com/en/ 입니다. 아래 코드는 현재 페이지의 url 주소를 검색하여 결과에 따라 한국페이지 또는 영문페이지 여부를 alert() 함수를 사용하여 보여주는 간단한 스크립트 예제입니다.

<script type="text/javascript">
if (!location.href.match('/en')) {
alert('English page!');
}
else {
alert('Korean page!');
}
</script>

위 코드는 현재 url 주소에 '/en'이 포함되어 있는지 match() 함수를 사용하여 확인합니다. 만약에 현재 접속자 url에 해당 값이 포함되어 있다면 경고창을 띄우고 영문 페이지, 국문페이지를 출력할 것입니다.

!! match() 함수 예제소스 보기

하나 더 알아보겠습니다. url 주소가 아닌 일반 문자열에 포함된 단어가 있는지 확인하는 예제를 알아보겠습니다. 만약 str 변수에 'red'라는 문자가 포함되어 있는지 확인하는 코드를 match()를 사용하여 작성한다면 아래와 같습니다.

<script type="text/javascript">
var str = 'red is impressive.'
str.match('red');
// red가 있으므로 red를 출력함
}
</script>

# 정규표현식을 사용한 match() 함수예제보기
앞에서도 말했지만 match() 함수는 정규표현식을 사용하는 방법 역시 가능합니다. 아래의 예제를 봐주세요.

var test  = 'love you. love me. love everything!'
var regExp = /love/gi;

test2 = test.match(regExp);

위 코드는 정규표현식을 사용하여 텍스트에 love가 있는지 확인하는 방법입니다. 보시는 것처럼 정규표현식 코드는 따로 regExp 변수에 저장하였으며 표현식 뒤에 있는 gi는 대소문자 구분을 허용하지 않고 모든 패턴을 검색하기 위함입니다. 이를 실행하면 그 결과는 어떻게 될까요? 위 코드는 아래와 같은 결과값을 반환합니다.

['love', 'love', 'love']

// test2변수에 배열로 모든 love 텍스트가 저장됨

실행결과 일치하는 모든 문자열은 배열로 저장됩니다. 이를 통해 몇개가 있는지 역시 확인이 가능할 것입니다. test2.length 사용하면 3을 출력합니다. 이처럼 정규표현식을 활용하면 이 함수를 이용해 할 수 있는 일들이 굉장히 다양하게됩니다.

여기까지 match() 함수의 사용방법에 대하여 일반적인 방법과 정규표현식 방법들을 모두 알아보았습니다. 혹시 궁금하신점 있으시다면 댓글 남겨주세요.