IE8 이상의 브라우저에서 동일하게 보이는 Select Box 디자인하기
2014-03-08
javascript의 정규표현식에 대해 알아 봅니다
2016-02-23
Explanation
오늘은 자바스크립트 정규표현식에 대해 포스팅을 해보려 합니다. 너무 복잡하고 어렵지 않은 가벼운 첫걸음을 위한 글입니다.
|
1 2 |
// 이메일 검증 var emailCheck = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; |
보통 처음로 접하는 정규표현식이 이렇게 생겨서 더 어렵게 느껴지는게 아닐까요..
우선 정규표현식은 다양하게 사용이 되지만 몇가지 예로는
.test(), .match(), .search(), .replace() 등.. 이 있습니다.
.test() – 해당 문자열이 있는지 true, false 출력
.match() – 해당 문자열이 있다면 그 문자열을 출력
.search() – 해당 문자열이 몇번째에 있는지 출력
.replace() – 해당 문자열을 다른 문자로 바꿉니다.
|
1 2 3 4 5 |
var text = 'abc def ghi jkl abc def'; // 대상 문자열 var testReg = /abc/; // 찾을 문자열 var result = testReg.test(text); console.log(result); // true |
|
1 2 3 4 5 |
var text = 'abc def ghi jkl abc def'; // 대상 문자열 var matchReg = /abc/; // 찾을 문자열 var result = text.match(matchReg); console.log(result); // ["abc", index: 0, input: "abc def ghi jkl abc def"] |
|
1 2 3 4 5 |
var text = 'abc def ghi jkl abc def'; // 대상 문자열 var searchReg = /def/; // 찾을 문자열 var result = text.search(searchReg); console.log(result); // 4 |
|
1 2 3 4 5 |
var text = 'abc def ghi jkl abc def'; // 대상 문자열 var replaceReg = /def/; // 찾을 문자열 var result = text.replace(replaceReg, '가나다'); console.log(result); // 'abc 가나다 ghi jkl abc def' |
위의 예제들은 아주아주 간단한 소개로 자세한 정보는 ‘모질라 개발자 네트워크(https://developer.mozilla.org/ko/)’ 같은 곳들을 참고하시면 좋을 것 같습니다.
일단 기본적으로 정규식의 문자열은 ‘/’와 ‘/’ 사이에 적습니다. 그리고 각각의 옵션 들이 특수문자로 사용되기 때문에 문자열로 특수문자를 사용하기 위해서는 ‘\'(역슬러시)를 앞에 적어서 사용할 수 있습니다.
[ex. var regText = /abc\=abc/;]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var text = '<ul id="aaa"><li>Hello <span id="aaa">World</span></li></ul>'; // 대상 문자열 // 위 문자열의 ul와 li엘리먼트를 div로 바꾸고 aaa로 반복 사용된 id 프로퍼티를 class로 바꿔보려합니다. var replaceReg = /(<\/?(ul|li))|((id\=)+)/gi; // 마지막의 /gi 에서 // g 는 대상 문자열 모든 곳에서 찾습니다. g가 없다면 첫번째 찾은 것에서 찾는 것을 멈춥니다. // i 는 대소문자를 가리지 않고 찾습니다. // 우선 가장 큰 영역부터 보게되면 /( ... | ... )/ // 여기에서 |는 또는, or 을 의미합니다. 둘중 하나라도 있을때? // 첫번째 ( ... ) 를 보자면 // 첫번째로 '<' 를 가지고 있으면서 // ? 앞의 '/'는 있을 수도 있는 것도 포함하고 없는 것도 포함한다. // 다시 (ul|li) ul 또는 li // 해석하자면 <ul </ul <li </li 를 찾을 것입니다. // 두번째의 ( ... ) 는 // + 앞의 (id=)가 1나 이상 포함하고 있다면 // 이번 예제에서는 꼭 +를 하지 않아도 상관없겠네요. // /(<\/?(ul|li))|((id\=))/gi text = text.replace(replaceReg, function(x){ //.replace() 의 두번째 인자는 함수로 사용할 수 있고 x에는 정규표현식에 해당된 문자가 됩니다. if(x.search('<') === -1) x = 'class='; // 대상이 < 를 가지고 있지 않다면 (x는 'id=' 만 해당이 됩니다.) else if(x.search('/') === -1) x = '<div'; // 대상이 / 를 가지고 있지 않다면 (x는 '<ul', '<li' 가 됩니다.) else x = '</div'; // 나머지 '</ul', '</li' return x; }); console.log(text); // <div class="aaa"><div>Hello <span class="aaa">World</span></div></div> |
