-
자바스크립트 - 정규식프로그래밍/JavaScript 자바스크립트 2021. 10. 6.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var p, s; // 1. 리터널 방식 : 파라미터에 따옴표를 사용하지 않는다. p = /ab+c/i; // +:앞문자1개이상, i:대소문자를구분하지않음 // ac(x), abbc(o), ab(x), a1bc(x), xy abc 12(o) s = 'xy abc 12'; console.log( p.test(s) ); // true // 2. 생성자 방식 p = new RegExp('ab+c', 'i'); s = 'xy Abc 12'; console.log( p.test(s) ); // true </script> </head> <body> <h3>정규식(Regular Expression) - 정규식 생성방법</h3> </body> </html>보통은 생성자 방식 보다는 리터널(값을 주는) 방식으로 많이 사용한다.
+ = 앞 문자가 한개 이상 즉 앞 문자가 ab가 하나씩은 있어야함
그리고 슬러시 뒤에 i는 대소문자 구분안하고 검사 하겠다는 뜻
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var p, s; // g : global match - 일치하는 모든 문자 검색. 치환할 때 유용 // i : ignore case - 대소문자 구분 안함 p = /[a-d]+/; s = '12ax'; console.log( p.test(s) ); // true s = '12Ax'; console.log( p.test(s) ); // false p = /[a-d]+/i; s = '12ax'; console.log( p.test(s) ); // true s = '12Ax'; console.log( p.test(s) ); // true s = "web 자바 jsp 자바 html 자바"; p = /자바/; var a = s.replace(p, 'java'); console.log( a ); // web java jsp 자바 html 자바 p = /자바/g; var a = s.replace(p, 'java'); console.log( a ); // web java jsp java html java </script> </head> <body> <h3>정규식(Regular Expression) - flag </h3> </body> </html>[a-d]+ 는 괄호로 묶인 애들을 패턴 정규식이라고 하며 a~d의 의미
+가 있으니까 앞에 한글자가 a~d 사이는 하나는 있어야 한다 라는 뜻
그리고 /자바/g 같은 경우 뒤에 g는 자바랑 똑같이 일치하는 모든 문자를 검색 한다는 뜻
문자열 치환할때 유용하다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var p, s; p = /a.s/; s = "abs"; console.log( p.test(s) ); // true s = "as"; console.log( p.test(s) ); // false // .* : 모든 문자 // 자바로 시작 p = /^자바.*/; s = "자바 사랑"; console.log( p.test(s) ); // true s = "이자바"; console.log( p.test(s) ); // false // 자바로 끝 p = /.*자바$/; s = "자바 사랑"; console.log( p.test(s) ); // false s = "이자바"; console.log( p.test(s) ); // true // 자바로 시작하고 웹으로 끝나는 모든 문자 p = /^자바.*웹$/; s = '자바 스프링 웹'; console.log( p.test(s) ); // true s = '자바 웹 스프링'; console.log( p.test(s) ); // false // 한자리 숫자 // p = /^\d{1}$/; p = /^[0-9]$/; s = '7'; console.log( p.test(s) ); // true s = '77'; console.log( p.test(s) ); // false // 한자리 이상 숫자 // p = /^\d{1,}$/; // p = /^(\d)+$/; p = /^[0-9]+$/; s = '12'; console.log( p.test(s) ); // true s = '+12'; console.log( p.test(s) ); // false // 한자리 이상 숫자(부호가능, 소수점 가능) p = /^[+-]?\d+(\.?\d*)$/; s = '12'; console.log( p.test(s) ); // true s = '+12.5'; console.log( p.test(s) ); // true s = '+12'; console.log( p.test(s) ); // true // 1~3자리 수 p = /^\d{1,3}$/; </script> </head> <body> <h3>정규식(Regular Expression) - 패턴 </h3> </body> </html>. 점은 뭐와 뭐의 사이 라는 뜻
a.s는 a와s사이에 뭐가오든 상관없다는 뜻 없는건 안됨
한자리 숫자는 패턴 정규식으로 괄호써서 [0-9] 이런식으로
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> var p, s; // 1자 이상의 영숫자 // p = /^[a-z0-9]+$/i; p = /^[a-zA-Z0-9]+$/; // 1자 이상의 영숫자, _ p = /^\w+$/; // 영문, 띄어쓰기만 가능 p = /^[a-zA-Z\s]+$/; s = 'a b'; console.log( p.test(s) ); // true s = 'a 1'; console.log( p.test(s) ); // false s = ' '; console.log( p.test(s) ); // true // 영문으로 시작하고 영문, 띄어쓰기만 p = /^(?=[a-z])[a-z\s]+$/i; s = 'a b'; console.log( p.test(s) ); // true s = ' '; console.log( p.test(s) ); // false // 자바, 웹, java, web 중 하나라도 존재 여부(영문은 대소문자 구분안함) p = /(자바|웹|java|web)/i; s = '스프링 오라클 서블릿'; console.log( p.test(s) ); // false s = '스프링 오라클 Web'; console.log( p.test(s) ); // true // 0자 이상 한글 // p = /^[가-힣]*$/; p = /^[\uac00-\ud7a3]*$/; // 1자 이상 한글 p = /^[가-힣]+$/; // 이미지 파일 p = /(\.gif|\.jpg|\.jpeg|\.png)$/i; </script> </head> <body> <h3>정규식(Regular Expression) - 패턴 </h3> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <script type="text/javascript"> function symbolHtml(content) { if(! content) return content; content = content.replace(/</g, "<"); content = content.replace(/>/g, ">"); content = content.replace(/\"/g, """); content = content.replace(/\'/g, "'"); content = content.replace(/\(/g, "("); content = content.replace(/\)/g, ")"); return content; } function send() { var f = document.myForm; var s; s = f.msg.value.trim(); if( !s ) { alert("내용을 입력하세요."); f.msg.focus(); return; } s = symbolHtml(s); f.msg.value = s; } </script> </head> <body> <h3>HTML 태그를 특수 문자로 변환</h3> <form name="myForm"> <p> 내용 : <textarea rows="5" cols="50" name="msg"></textarea> </p> <p> <button type="button" onclick="send()">보내기</button> </p> </form> </body> </html>정규식과 replace() 를 활용해서 HTML 태그를 다른걸로 바꿀 수 있다.
나중에 HTML 코드를 암호화 하고자 할때 참고가 될 수 있다.
반응형'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글
자바스크립트 - 파일 File (1) 2021.10.06 자바스크립트 - DOM (0) 2021.10.06 자바스크립트 - Form 폼 (양식) / 예제 (0) 2021.10.06 자바스크립트 - Event 이벤트 핸들러 (0) 2021.10.02 자바스크립트 - navigator (0) 2021.10.01
