Rangeのサンプル

サンプル1

適当な文章を強調してみたりする。

ソース1

<p class="sample" id="smp1">適当な文章を<em>強調して</em>みたりする。</p>
function rangetest(){
  if(document.implementation.hasFeature("Range","2.0")){
    rng = document.createRange();
    samplenode = document.getElementById('smp1').firstChild; //ノード「適当な文章を」
    rng.setStartBefore(samplenode); //ノード「適当な文章を」の前
    alert('開始点 コンテナ'+ rng.startContainer.nodeName + ' オフセット' + rng.startOffset);
    samplenode = document.getElementById('smp1').lastChild; //ノード「みたりする。」
    rng.setEndBefore(samplenode); //ノード「みたりする。」の前
    alert('終了点 コンテナ'+ rng.endContainer.nodeName + ' オフセット' + rng.endOffset);
    
    rng2 = document.createRange();
    rng2.selectNode(document.getElementsByTagName('em')[0]); //<em>〜</em>のすぐ外に境界点を設定。
    //この時点で、<p class="sample" id="smp1">{rngの開始点}適当な文章を{rng2の開始点}<em>強調して</em>{rngの終了点}{rng2の終了点}みたりする。</p>、となっている。
    switch(rng.compareBoundaryPoints(1,rng2)){
      case -1:
        alert('前');
        break;
      case 0:
        alert('同じ');
        break;
      case 1:
        alert('後');
    }
    
    //rng2の場所を変える
    rng2.setStart(document.getElementById('smp1').firstChild,3);
    rng2.setEnd(document.getElementById('smp1').childNodes[2],3);
    alert('rng2の文字列だけ:'+rng2.toString());
    
    df = rng2.cloneContents();
    document.getElementById('smp1').appendChild(df);
    
    rng.detach();
    rng2.detach();
  }
}