Recognize URL in Text with Regex (정규식으로 URL 인식하기) feat OG Tag

안녕하세요.

기억하기 위해 위해 남기는 글입니다. 이쁜글 쓰기에는 큰 의미를 두지 않아요. :)

도움 되길 ...

카카오톡 같이 URL을 입력하면 관련 사이트 썸네일 + 정보가 표시된다.

이를 Open Graph 태그라 부르며 각 유명 사이트의 헤더에는 OG:title 형식으로 정보를 가지고 있다.

이런 정보를 가져오기 위해서는 HTML parser, 즉, 그냥 간단히 HTML을 사전에 읽어 관련 정보가 있는지 확인하는 기능이 필요하다.

이기능은 프론트 단에서는 구현하기 힘든듯 보인다. (구글신도 안나옴)

노드 백엔드단에서 scrapper or scrawller라 불리는 HTML 파서를 구현해야한다.

우린 시간도 서버도 없고 백엔드도 모르니까 그냥 라이브러리를 쓰자.

OG 태그 라이브러리를 인스톨하고 source에 URL 값을 전달하면 관련 정보를 가져와 표현해준다. easy

근데 텍스트 안에 URL이 담겨있는지 어떻게 인식하나?

뭐 방법은 많다.

URL 유무를 판단할수 있는 방법은 많다.

아 글쓰기 귀찮아 졌따. 왜 주절주절 하는거였지...

코드 위주로 하겟다.

'abcdef'.find
'abcdef'.startWith

스트링 기본 내부 메소드를 쓰면 찾을수 있다.
근데 시작점은 찾을수 있는데 URL끝나는 부분은 어떻게 인지 할건가?

그래서 정규식을 쓴다.

특정 형식을 정하여 텍스트를 캐치할수 있다.

구글에 URL 정규식을 검색하면 많이 나온다.
이참에 정규식 짜는것도 겸사겸사 공부해두면 좋다. 복잡해 보이지만 막상짜보면 그닥 어렵지 않다.
귀찮을뿐...

정규식 사용법

const Regex =  /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/g;

'여기 싸이트 http://www.naver.com 가서 찾아볼래? '.match(Regex) 
// 결과값 : ["http://www.naver.com", ]

매치로 하면 맞는 구문들을 array 형식으로 값을 리턴한다.

만약 URL을 클릭하여 해당 사이트로 이동하는 기능을 넣고싶을 경우 아래를 참고
URL텍스트를 a tag로 감싸고 href에도 url 주소를 넣어 클릭시 해당 사이트가 표시된다.
이형식은 웹에서는 유효하지만 리액트 네이티브 같은 앱에서는 다른형식을 써야한다.
이정도면 감잡으셨으리라 믿는다.

function urlify(text) {
  var urlRegex = /(https?:\/\/[^\s]+)/g; //정규식의 형태는 만드는 사람 마음 
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
  })
  // or alternatively
  // return text.replace(urlRegex, '<a href="$1">$1</a>')
}

흠... 뭐 더 적을 만한게 .... 없다. 빠잉