#카카오톡 링크 인식 분석[코드]

[실험] 편에서 카카오톡에서 링크를 보낼경우 링크로 인식하는 경우를 테스트 해 보았고, 나 규칙을 다시 한번 정리하면 다음과 같다.

 

1) 1, 2, 3, 4 번으로 보아 프로토콜(http(s)) 가 있던 없던 링크로 인식한다.

2) 4번, 5번으로 보아,  마지막에 올 수 있는 도메인이 명확하게 있다.

3) 6번, 7번으로 보아, 링크 앞에 딸린 특수문자는 제외하고 링크로 인식

4) 9번으로 보아, 도메인 마지막의 특수문자는 제외하고 링크로 인식

5) 10,번, 11번으로 보아 - 한개는 링크로 인식, --는 링크로 인식하지 않는다.

6) ₩~!@#$%^&*()+-=;':",.<>? 의 특수문자가 나오는경우 앞에 특수문자 전까지만 링크로 인식

7) _가 나올경우는 전체를 문자로 인식

8) /가 나오는경우 /뒤 전체를 포함하여 링크로 인식.

 

이제 위 규칙을 따라서  URL 이 입력으로 들어왔을때 링크로 인식하는 부분만 출력하는 프로그램을 만들어 보자.

이와같은 문제를 해결하는데 유용한 도구인 정규식을 써서 구현해보도록하겠다.

 

만약 위 규칙을 모두 if ... else  분기문으로 해결 한다고 하면 ... (판단은 독자들에게 맡기겠음😅)

const topLevelDomains = "(com|net|io|kr|ai|shop|co|tech|pro|org|cn|xyz|biz|info|jp|in|so)";
const linkReg = new RegExp('^(https?:\\/\\/)?(?:[\\/:\\~!@#$%^&\\*()-]*)?((([a-zA-Z0-9-]+[.])+'+topLevelDomains+')([/][a-zA-Z0-9+&@?%=_.]+)*)');

 

위의 한줄로 위 규칙을 적용한 코드를 작성하였다. 

한줄에 너무 많은 내용이 포함되어 있기 때문에 이해할수 있는 단위로 쪼개서 보도록 하자

 

1. ^(https?\\/\\/)? 

    => http:// 혹은  https://로 시작하거나 존재하지 않거나.

 

2. (?:[\\/:\\~!@#$%^&\\*()-]*)? 

    => \\/:\\~!@#$%^&\\*()- 특수문자들이 복수개 존재하거나 존재 하지 않거나.

    => 맨앞 ?: 는 비그룹화 시킨다는 뜻.

 

3.([a-zA-Z0-9-]+[.])+topLevelDomains

    => (문자열.) 조합 + 명시된 최상위 도메인만 올 수 있음

 

4. ([/][a-zA-Z0-9?=]*)*

    => 뒤에 /문자열 or 쿼리스트링 이 복수개 올 수 있음.

 

 

#테스트

 

아래 11가지의 URL 을 가지고 실험 하였다.

let url1 = "https://www.naver.com";
let url2 = "http://www.naver.com";
let url3 = "www.naver.com";
let url4 = "naver.com";
let url5 = "///naver.com";
let url6 = "/naver.com";
let url7 = '^^*//www.naver.com';
let url8 = '^^*//--38-naver.com';
let url9 = '^^*//--38-naver.com(*&^';
let url10 = 'asd.asd.asd.asd.com';
let url11 = 'naver.com/asd/asd?a=10';

const topLevelDomains = "(com|net|io|kr|ai|shop|co|tech|pro|org|cn|xyz|biz|info|jp|in|so)";
const linkReg = new RegExp('^(https?:\\/\\/)?(?:[\\/:\\~!@#$%^&\\*()-]*)?((([a-zA-Z0-9-]+[.]){1,4}'+topLevelDomains+')([/][a-zA-Z0-9+&?%=_.]+)*)');

let result = httpReg.exec(url1);
let result2 = httpReg.exec(url2);
let result3 = httpReg.exec(url3);
let result4 = httpReg.exec(url4);
let result5 = httpReg.exec(url5);
let result6 = httpReg.exec(url6);
let result7 = httpReg.exec(url7);
let result8 = httpReg.exec(url8);
let result9 = httpReg.exec(url9);
let result10 = httpReg.exec(url10);
let result11 = httpReg.exec(url11);

console.log(result[2]);		// www.naver.com
console.log(result2[2]);	// www.naver.com
console.log(result3[2]);	// www.naver.com
console.log(result4[2]);	// naver.com
console.log(result5[2]);	// naver.com
console.log(result6[2]);	// naver.com
console.log(result7[2]);	// www.naver.com
console.log(result8[2]);	// 38-naver.com
console.log(result9[2]);	// 38-naver.com
console.log(result10[2]);	// asd.asd.asd.asd.com
console.log(result11[2]);	// naver.com/asd/asda=10