1005_JavaScript : 정규식(정규 표현식) Regular Expression

호쏘2 2021. 10. 5. 22:55

2021. 10. 5. 22:55

정규식(regular expression)이란 ?

- 정규식(정규 표현식)은 문자열에서 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다.

- 정규식을 이용하면 특정 패턴과 일치하는 문자열의 검색, 치환, 추출 등이 가능하다.

- 자바 스크립트에서 정규식은 객체이다.

- 정규식 패턴(pattern)은 RegExp 객체의 exec(), test(), compile() 함수, 그리고 String 객체의 match(), replace(), search(), split() 메소드 등과 함께 쓰인다.

RegExp 객체 개요

- RegExp 객체는 정규 표현식을 구현한 자바스크립트 표준 내장 객체이다.

- RegExp 객체 생성

(1) 형식 var 변수 = new RegExp(pattern[, flags]);

(2) 매개변수

1) pattern : 정규식(regular expression)을 나타내는 문자로, 패턴은 따옴표나 슬래시(/)로 감싸야 한다.

2) flags : 기본 검색 설정을 변경할 수 있는 플래그로 다음 값이 조합을 가질 수 있다.

g : global match 일치하는 첫 번째 문자에서 멈추지 않고 전체에서 일치하는 모든 문자를 검색한다.

i : ignore case 대소문자를 구별하지 않는다.

m : multiline. 시작 또는 끝 문자 탐색(^or$)이 다중 행에 적용되도록 한다.

y : 대상 문자열에서 이 정규 표현식이 lastindex 속성에 의해 지정된 인덱스에서만 일치하며, 이후의 모든 인덱스에서 일치하지 않는다.

RegExp 객체 생성의 방법

- 리터럴 방식 : 파라미터에 따옴표를 사용해선 안된다.

- 생성자 방식 : 파라미터에 따옴표를 사용해야 한다.

<!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) );

// 2. 생성자 방식
p = new RegExp('ab+c', 'i');
s = 'xy Abc 12';
console.log(p.test(s));

</script>

</head>
<body>

<h3>정규식(Regular Expression) - 정규식 생성방법</h3>

</body>
</html>

flag

<!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>

패턴

<!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 = /^자바.*/; // .은 반드시 한글자 *은 앞에있는 글자가 0개 이상
s = "자바 사랑";
console.log( p.test(s) ); // true
s = "이자바";
console.log( p.test(s) ); // false

//자바로 끝
p = /.*자바$/; // .은 반드시 한글자 *은 앞에있는 글자가 0개 이상
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
s = "자바웹";
console.log( p.test(s) ); // true

// 한자리 숫자
// p = /\d{1}/; // a1b 도 됨. a13ba1도 됨.
// 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}$/;
s = '123';
console.log( p.test(s) );
s = '1233';
console.log( p.test(s) );

</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">
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>

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, "&lt;"); 
	content = content.replace(/>/g, "&gt;");
	// 붙여도 되는 것이 있고, 안붙여도 되는 것이 있음, 모르겠으면 \를 붙이자
	content = content.replace(/\"/g, "&quot;");
	content = content.replace(/\'/g, "&#39;");
	content = content.replace(/\(/g, "&#40;");
	content = content.replace(/\)/g, "&#41;");
	
	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>

저작자표시 동일조건

'쌍용강북교육센터 > 10월' 카테고리의 다른 글

1006_JavaScript : File, FileReader interface 파일관련인터페이스들 (0)	2021.10.07
1006_JavaScript : DOM (Document Object Model) 문서 객체 모델 (0)	2021.10.07
1005_JavaScript : 쪽지보낼 사람 선택하기 (0)	2021.10.05
1005_JavaScript : 회원가입 유효성 검사 (0)	2021.10.05
1005_JavaScript : 게시판 전체선택 체크박스 (0)	2021.10.05

개발새발, 써놓기