<HTML>
<BODY>
<b>
  <font color="maroon" unselectable="on">문자열 중 원하는 부분 선택 후 아래 버튼 클릭!</font>
</b>
<script language='JavaScript'>
<!--
function AddLink() {
  /*******************************************************************
    사용자가 선택한 문자열을 변수로 저장한다.
  *******************************************************************/
  var sText = document.selection.createRange();
  if (!sText==""){
    /*******************************************************************
      "하이퍼링크" 메뉴를 실행시킨다.
    *******************************************************************/
    document.execCommand("CreateLink");
    /*******************************************************************
      sText.parentElement()는 사용자가 선택한 문자열에 대한 패런트 요소를 얻어 온다.
      이미 "하이퍼링크" 대화 상자에서 입력한 값이 이 요소에 반영되었으므로,
      이 값의 tagName 속성이 "A"일 경우 계속 진행한다.
    *******************************************************************/
    if (sText.parentElement().tagName == "A"){
      /*******************************************************************
        사용자가 선택한 문자열의 내용을 새로 추가시킨 하이퍼링크 주소로 대치시킨다.
        만일 이 코드를 주석으로 막으면 사용자가 선택한 문자열에 하이퍼 링크 속성만 추가된다.     
      *******************************************************************/
      sText.parentElement().innerText=sText.parentElement().href;
      /*******************************************************************
        전경색을 "maroon" 색으로 변경시킨다.
      *******************************************************************/
      document.execCommand("ForeColor","false","maroon");
    }   
  }
  else{
    alert("문자열의 일부를 선택한 후 이 버튼을 클릭하세요!");
  }
}
//-->
</script>
<p style="color=blue">
사용자가 선택한 문자열 중 원하는 부분 선택 후 아래 버튼을 클릭하면,
링크를 만들수 있습니다.
</p>
<BUTTON onclick="AddLink()" unselectable="on">링크 만들기</BUTTON>
</BODY>
</HTML>



document.execCommand 에 대해서 좀더 알아봐야 겠다. 쩝...



출처 : http://tong.nate.com/heart2heart/34130212

+ Recent posts