JAVA 웹개발 과정 국비 44일차 정리

44일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

https://regexr.com/ 사이트가 도움이 많이 되었다.
오늘은 js에서 정규표현식을 사용하는 방법을 배웠다.

1. 정규표현식(JS)

1) js 내에서 정규표현식 사용하기

정규표현식도 하나의 자료형으로 변수에 저장이 가능하다.

let str = "안녕하세요! 저는 Jane 입니다. 급한 일은 010-1234-4321 로 연락주세요.";
let regex = /Jane/;

let result1 = regex.test(str);
let result2 = regex.exec(str);

정규표현식은 객체로, 포인터를 내부적으로 가지고 있는다.
포인터가 하나씩 넘어가다가 정규표현식에서 찾는 조건에 맞으면 그 순간 멈추게 되는데, flag에서 g를 쓰게 되면 포인터는 초기화 되지 않아서 함수를 또 쓰게 되면 포인터가 멈춘 자리에서부터 움직인다는 것을 주의해야한다.

2) regex.test(str) : boolean

문자열 안에 정규표현식에 해당하는 데이터가 존재하면 true를 아니면 false를 리턴한다.

아래 예제는 010-0000-0000 또는 01000000000 형식의 핸드폰번호를 입력하면 핸드폰 번호가 맞습니다라고 알려주고, 그 외의 형식이면 핸드폰 번호가 아닙니다라고 알려준다.

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

3) form 태그

페이지를 이동하는 방법으로는 가장 널리 알려진 a 태그가 있다.
그러나 또 다른 방법으로는 form 태그가 있다.

form 태그는 눈에 보이지 않고, type=”submit” 속성을 가진 input태그와 같이 쓴다.
이 input 태그는 일반적인 button 태그와 동일하게 생겼는데, 차이점이 있다면 이벤트 헨들러를 자체적으로 가지고 있다.
따라서 form 태그 안에 submit 버튼을 누르면 action 속성의 링크로 이동할 수 있게 된다.

그렇다면 a태그와 다른 점은 무엇인가?
a태그는 단순히 페이지를 이동하는 개념이라면, form태그의 submit은 데이터를 전송하는 기능을 가지고 있다. 즉, 같은 form에 있는 다른 입력값들도 보따리에 싸서 같이 이동하여, 이동한 페이지에 모두 제출하겠다라는 뜻이 된다.
따라서 submit을 쓸 때는, 무언가를 입력받는 태그들을 같이 가지고 있을 확률이 높다.
아래 예제는 조건에 맞춰 id를 유효성 검사하여 맞으면 제출 페이지(편의를 위해 naver로 바꿨다-404에러페이지가 뜸)로 가게 하고, 아니면 alert를 뜨게 만들었다.

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

4) regex.exec(str) : [ ]

test 함수보다 더 많은 정보를 반환하며, 그룹화 데이터를 다루기에 용이하다.

exec 함수는 배열을 리턴한다고는 하지만, 배열의 요소와 각종 정보를 함께 리턴한다.
그룹화 데이터를 다루기에 용이하여, 배열의 index에 접근해서 원하는 정보를 캡처변수로 받아올 수 있다.

let str = `여보세요! 저는 jane입니다. 급한 일은 010-1112-3342 or 010-1234-4321로 연락 주세요.`;
        
let regexPhone = /(010-?\d{4}-?\d{4}) or (010-?\d{4}-?\d{4})/;

let result = regexPhone.exec(str);

console.log(result);
// (3) ['010-1112-3342 or 010-1234-4321', '010-1112-3342', '010-1234-4321', index: 24, input: '여보세요! 저는 jane입니다. 급한 일은 010-1112-3342 or 010-1234-4321로 연락 주세요.', groups: undefined]
// 0: "010-1112-3342 or 010-1234-4321"
// 1: "010-1112-3342"
// 2: "010-1234-4321"
// groups: undefined
// index: 24
// input: "여보세요! 저는 jane입니다. 급한 일은 010-1112-3342 or 010-1234-4321로 연락 주세요."
// length: 3
console.log(RegExp.$_); // 입력된 전체 문장
// 여보세요! 저는 jane입니다. 급한 일은 010-1112-3342 or 010-1234-4321로 연락 주세요.
console.log(result[0]); // $&
// 010-1112-3342 or 010-1234-4321
console.log(result[1]); // $1
// 010-1112-3342
console.log(RegExp.$1); // 위와 동일
// 010-1112-3342
console.log(result[2]); // $2
// 010-1234-4321
console.log(RegExp.$2); // 위와 동일
// 010-1234-4321

아래 코드는 네이버 웹툰의 소스코드를 크롤링해서 str 변수에 받은 후에, while문을 돌려서 이름과 평점을 검색하는 실습 코드이다.
while문 안에 data라는 변수를 지정할 수 있다는 것을 처음 알았다.
data 변수를 while문 안에서 할당하게 되면 값이 없을 때 null이 되고, null값에 [1]을 불러오게 되어서 오류가 난다.
다른 방법으로는 while(true)문 안에서 data 변수를 할당한 후에, if문으로 null값을 체크해주면 된다.

let str = `소스코드`;
let regex = /<dt>.+?title="(.+?)".*?<strong>(.+?)<\/strong>/gs;

let data;
while((data = regex.exec(str))!=null){
	console.log(data[1] + " : " + data[2]);
}