📔
web_study
  • JavaScript
  • 엘리_자바스크립트
    • 자바스크립트 기본
      • 클래스 예제와 콜백함수
      • 연산자 boolean
      • 함수 정의, 호출 그리고 콜백
      • 변수타입과 object 차이점
    • JavaScript async 와 await
    • JavaScript Promise
    • 자바스크립트 callback
    • 자바스크립트 json
    • 유용한 10가지 배열 함수들
    • 자바스크립트 배열(array)
    • 자바스크립트 object
    • 자바스크립트 (class vs object) 객체지향 언어
    • 자바스크립트 함수
    • 자바스크립트 연산.반복문
    • 데이터타입, data types, let vs var, hoisting
    • script async 와 defer의 차이점 콘솔 출력
    • 자바스크립트역사
  • 생활코딩
    • 재귀함수
    • 정규 표현식
    • 객체지향
      • 객체지향 프로그래밍
      • 생성자와 new
      • 전역객체
      • this
      • 상속
      • prototype
      • 표준 내장 객체의 확장
      • object
      • 데이터 타입
      • 참조
    • 함수지향
      • 유효범위
      • 값으로서의 함수와 콜백
      • 클로저
      • arguments
      • 함수의 호출
    • UI API, 문서
    • 모듈
    • 객체
    • 배열
    • 함수
    • 반복문
    • 조건문
    • 숫자와문자
    • 변수
    • 비교
  • 노마드 코더
    • Getting the Weather part One Geolocation
    • Image Background
    • TO DO List
    • Saving the User Name
    • Clock part One
    • 조건문 ( if , else, and, or)
    • evnet handlers
    • Function
    • Objects
    • Arrays
    • Variable(변수!)
    • Javascript
  • javascript30
    • Dram Kit
    • clock
    • Css Javascript
    • Array Cardio
    • flex panels
    • type ahead
    • Canvas Draw
    • Speech Synthesis
    • Whack A Mole
  • web standard
    • script 부분
    • form부분
    • 웹접근성
    • <meta>
  • 자바스크립트_이론
    • 기본지식(JAVASCRIPT)
    • 기본지식(CSS)
    • 기본지식(HTML)
    • 기본지식(HTTP)
    • Dom
    • 라이브러리, 프레임워크, 플로그인
Powered by GitBook
On this page
  • 정규 표현식
  • 컴파일
  • 정규표현식 리터럴
  • 정규표현식 객체 생성자
  • 정규표현식 메소드 실행
  • 문자열 메소드 실행
  • String.replace()
  • 옵션
  • 캡쳐
  • 치환
  • 추가공부 할 때 참조

Was this helpful?

  1. 생활코딩

정규 표현식

정규 표현식

정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다.

컴파일

컴파일은 검출하고자 하는 패턴을 만드는 일이다.

정규표현식 리터럴

	var pattern = /a/ //a가 찾고자하는 대상이다. 정규표현식을 패턴에 담는다

정규표현식 객체 생성자

var pattern = new RegExp('a'); // 정규표현식을 패턴에 담는다

정규표현식 메소드 실행

RegExp.exec()

	console.log(pattern.exec('abcdef')); // ["a"]
	console.log(pattern.exec('bcdefg')); // null -> a가 존재하지 않기때문에  null을 리

우리가 필요한 정보를 추출

RegExp.test()

console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false

우리가 찾는 정보 존재유무를 확인할때 사

문자열 메소드 실행

String.match()

console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null

RegExp.exec()와 비슷하다.

String.replace()

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef

문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴

옵션

i

var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"]; 대문자도 추출해

i를 붙이면 대소문자를 구분하지 않다.

g

var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og)); // ["a","a"]

g를 붙이면 검색된 모든 결과를 리턴한다.

캡쳐

var pattern = /(\w+)\s(\w+)/; // \s -> 공백을 의미함 
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1"); //패턴에 있는 인자를 뒤에 두개의 값으로 치환한다.
// $1 -> 첫번째그룹을 의미 $2 -> 두번째그룹 의
//  \s(공백)은 -> ,공백으로 치환
console.log(result); //everybody, coding 

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 이 때 기호 $를 사용하는데 아래 코드는 coding과 everybody의 순서를 역전시킨다.

그룹을 지정하고 지정된 그룹을 가져와서 사용하는것을 캡쳐라고 한다.

치환

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
// url을 찾을때마다 replace 내부에 있는 함수를 호출 했다면 이것을 첫번째 인자로 받게되어있음 
console.log(result);
// 결과 -> 생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.org/course/1</a> 입니다. 네이버 : <a href="http://naver.com">http://naver.com</a> 입니다.

추가공부 할 때 참조

Previous재귀함수Next객체지향

Last updated 3 years ago

Was this helpful?

생활코딩 정규표현식 수업
정규표현식을 시각화
정규표현식 빌더