[텍스트큐브] 라인(줄글)의 웹 주소 고리가 저절로 걸리게 하는 자바스크립트

  텍스트큐브의 라인(줄글)은 텍스트큐브 1.8부터 들어간 기능이다. 잘 하면 트위터 같은 쪽글 SNS와 연동시키는 쪽으로 쓸 수도 있을 것 같은데, 활용도를 높이기에는 아쉬운 점들이 있다.

  가장 아쉬운 점은 줄글에 웹 주소가 들어 있어도 <a> 태그로 고리가 걸리지 않은 채로 평문으로 나오는 것이다. 웹 주소 고리라도 저절로 걸리면 SNS에서 흔히 그러는 것처럼 짤막한 생각이나 소식을 알리는 데에 라인 기능을 쓸 수 있다.

  텍스트큐브 프로그램 코드를 고치면 좋겠으나, 라인 기능을 얼마나 오래 쓸 수 있을지 확신이 서지도 않아서 임시 방편이지만 자바스크립트를 써서 웹 주소에 고리가 걸리게 해 보았다.

<script>
function line_auto_linking() {
  var line_div = document.getElementById('line-content');
  if(!line_div) return 0;
  var line_more_page = document.getElementById('line-more-page');
  var pattern = /( |<[^<]+>)(https?:\/\/[^( |<)]+)/gi;
  line_div.innerHTML = line_div.innerHTML.replace(pattern, "$1<a href=\"$2\" target=\"_blank\">$2</a>");
  pattern = /( |<[^<]+>)(#([^( |<)]+))/gi;
  line_div.innerHTML = line_div.innerHTML.replace(pattern, "$1<a href=\"https:\/\/twitter.com\/hashtag\/$3\" target=\"_blank\">$2</a>");
}

line_auto_linking();
</script> 

  위 자바스크립트를 넣고 줄글 화면을 처음 열면, http 또는 https 프로토콜이 붙은 웹 주소와 #로 시작하는 해시 태그(hash tag)꼴 문자열에 알아서 웹 주소 고리가 걸린다. 첫번째 정규 표현식 처리를 통하여 흔히 쓰이는 웹 주소에 고리가 걸리고, 두번째 정규 표현식 처리를 통하여 # 기호가 붙은 낱말에 트위터의 해시 태그로 고리가 걸린다.

  줄글을 더 불러내는 단추(More)를 누른 다음에 뜨는 줄글까지 웹 주소가 걸리게 하려면, 살갗(스킨)의 skin.html 파일을 더 고친다. 쓰고 있는 살갗의 skin.html에서 다음 내용을 찾아서 onclick 속성에 위의 자바스크립트에 넣은 line_auto_linking 함수를 일정 시간 뒤에 실행하는 명령(굵은 글씨)을 더해 준다.

<s_line_button>
 <input type="submit" class="btn btn-success more-button input-button" value="More" onclick="[##_line_onclick_more_##]" />
</s_line_button>

↓

<s_line_button>
  <input type="submit" class="btn btn-success more-button input-button" value="More" onclick="setTimeout('line_auto_linking()',500); setTimeout('line_auto_linking()',5000); [##_line_onclick_more_##]" />
 </s_line_button>

  더 보기 단추를 누르면 웹 주소 고리를 거는 작업을 500밀리초(0.5초) 뒤에 수행하고, 5000밀리초(5초) 뒤에 또 수행한다. 같은 작업을 두 번 수행하게 한 것은 회선 문제 등으로 줄글을 빨리 불러오지 못했을 때에 대비하기 위함이다.