Daftar Snippet untuk Implementasi DOM Range API

Tabel Konten
  1. Mendapatkan Teks yang Terseleksi 
    1. Contoh Penggunaan 
  2. Seleksi Teks Otomatis 
  3. Konversi Node Terseleksi ke HTML 
    1. Contoh Penggunaan 
  4. Manipulasi Posisi dan Jarak Seleksi 
    1. Contoh Penggunaan 
  5. Memposisikan Caret ke Bagian Akhir Area Teks 
    1. Contoh Penggunaan 
  6. Menyimpan dan Mengembalikan Teks Terseleksi 
    1. Penggunaan 
  7. Mendapatkan Jarak Awal dan Akhir Teks Terseleksi pada Area Teks 
    1. Penggunaan 
  8. Menyisipkan Sesuatu Setelah Caret 
    1. 1. <div contenteditable> 
    2. Contoh Penggunaan 
    3. 2. <textarea> 
    4. Contoh Penggunaan 
  9. Menyisipkan Sesuatu Sebelum dan Setelah Teks Terseleksi 
    1. Contoh Penggunaan 
  10. Mendapatkan Elemen Induk dari Teks yang Terseleksi 
    1. Contoh Penggunaan 
  11. Lainnya 

Mendapatkan Teks yang Terseleksi 

Paling dasar. Fungsi ini digunakan untuk mengambil teks yang terseleksi. Hanya teks. Tag HTML tidak akan direpresentasikan sebagai node apa adanya. Untuk mengubah node terseleksi menjadi HTML, gunakan fungsi ini:

function getSelectionText() {
    var sel = "";
    if (window.getSelection) {
        sel = window.getSelection();
    } else if (document.getSelection) {
        sel = document.getSelection();
    } else if (document.selection) { // IE
        sel = document.selection.createRange().text;
    }
    return sel;
}

Contoh Penggunaan 

document.onmouseup = function() {
    alert(getSelectionText());
};

Lihat Demo

Seleksi Teks Otomatis 

function autoSelect(elem) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(elem);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection) { // IE
        sel = document.selection.createRange().text;
        range = document.body.createTextRange();
        range.moveToElementText(elem);
        range.select();
    }
}

Selengkapnya

Konversi Node Terseleksi ke HTML 

Fungsinya adalah untuk membawa bagian-bagian yang terseleksi menjadi HTML dalam bentuk string, sehingga hasil yang didapatkan bisa ditempelkan ke area tertentu sebagai duplikat yang sama dengan bagian yang terseleksi:

// http://stackoverflow.com/a/4652824
function getSelectionHTML() {
    var html = "";
    if (typeof window.getSelection != 'undefined') {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement('div'); // Just a placeholder
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != 'undefined') {
        if (document.selection.type == 'Text') {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

Contoh Penggunaan 

Sisipkan bagian yang terseleksi ke dalam area #result-container sebagai HTML:

document.getElementById('action-btn').onclick = function() {
    document.getElementById('result-container').innerHTML = getSelectionHTML();
};

Lihat Demo

Manipulasi Posisi dan Jarak Seleksi 

Fungsi ini digunakan untuk membuat jarak seleksi pada posisi yang telah ditentukan. Cuma berlaku untuk elemen formulir. Menentukan nilai yang sama pada parameter selectionStart dan selectionEnd memungkinkan fungsi ini untuk digunakan sebagai pengatur letak caret teks:

// http://stackoverflow.com/a/499158
function setSelectionRange(input, selectionStart, selectionEnd) {
    if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    } else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    }
}

Contoh Penggunaan 

document.getElementById('action-btn').onclick = function() {
    setSelectionRange(document.getElementById('target-textarea'), 10, 100);
};

Lihat Demo

Memposisikan Caret ke Bagian Akhir Area Teks 

// http://stackoverflow.com/a/4716021
function moveCaretToEnd(el) {
    if (typeof el.selectionStart == 'number') {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != 'undefined') {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

Contoh Penggunaan 

<textarea onfocus="moveCaretToEnd(this);"> ... </textarea>

Lihat Demo

Menyimpan dan Mengembalikan Teks Terseleksi 

Fungsi pertama digunakan untuk mendapatkan teks terseleksi agar bisa Anda simpan ke dalam variabel. Fungsi ke dua digunakan untuk mengembalikan node terseleksi yang telah Anda simpan tadi:

// http://stackoverflow.com/a/2925633

var savedSelection = null; // Variable to save the selected node

function saveSelection() {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

Penggunaan 

document.getElementById('save-selection-btn').onclick = function() {
    savedSelection = saveSelection();
};

document.getElementById('restore-selection-btn').onclick = function() {
    restoreSelection(savedSelection);
};

Lihat Demo

Mendapatkan Jarak Awal dan Akhir Teks Terseleksi pada Area Teks 

function getInputSelection(el) { // http://stackoverflow.com/a/3053640

    var start = 0,
        end = 0,
        normalizedValue,
        range,
        textInputRange,
        len,
        endRange;

    if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') {

        start = el.selectionStart;
        end = el.selectionEnd;

    } else {

        range = document.selection.createRange();

        if (range && range.parentElement() == el) {

            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working text range that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since `moveStart`/`moveEnd` doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;
                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }

        }

    }

    return {
        start: start,
        end: end
    };

}

Penggunaan 

document.getElementById('test-btn').onmousedown = function() {
    var position = getInputSelection(document.getElementById('test-textarea'));
    alert('Start: ' + position.start + ', End: ' + position.end);
};

Lihat Demo

Menyisipkan Sesuatu Setelah Caret 

1. <div contenteditable> 

Fungsi yang bisa bekerja pada elemen HTML dengan atribut contenteditable:

// http://stackoverflow.com/a/6691294
function pasteHtmlAtCaret(html) {
    var sel, range, el, frag, node, lastNode;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            // `Range.createContextualFragment()` would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            el = document.createElement('div');
            el.innerHTML = html;
            frag = document.createDocumentFragment();
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != 'Control') {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

Contoh Penggunaan 

Sisipkan emoticon setelah kursor caret:

document.getElementById('insert-btn').onclick = function() {
    pasteHtmlAtCaret('<img src="emoticon.gif" width="16" height="16">');
};

Lihat Demo

2. <textarea> 

Fungsi yang bisa bekerja pada elemen formulir teks seperti <textarea>:

// http://stackoverflow.com/a/11070952
function insertStringAtCaret(str, elem) {
    var value = elem.value,
        before = value.substring(0, elem.selectionStart),
        after = value.substring(elem.selectionEnd, value.length),
        pos = before.length + str.length;
    elem.value = before + str + after;
    setSelectionRange(elem, pos, pos);
}

function setSelectionRange(input, selectionStart, selectionEnd) {#code-snippet:manipulasi-posisi-dan-jarak-seleksi}

Contoh Penggunaan 

<button onmousedown="insertStringAtCaret(' :D ', document.getElementById('target-textarea'));">:D</button>

Lihat Demo

Menyisipkan Sesuatu Sebelum dan Setelah Teks Terseleksi 

Pada umumnya digunakan untuk menyisipkan tag HTML sebelum teks terseleksi dan setelah teks terseleksi. Fungsi ini Saya buat berdasarkan fungsi di atas:

// Mendukung untuk semua peramban mayor dan IE8+
function wrapText(str1, str2, elem) {
    var value = elem.value,
        before = value.substring(0, elem.selectionStart),
        selected = value.substring(elem.selectionStart, elem.selectionEnd),
        after = value.substring(elem.selectionEnd, value.length),
        endpos = before.length + str1.length + selected.length + str2.length;
    elem.value = before + str1 + selected + str2 + after;
    setSelectionRange(elem, before.length, endpos);
}

function setSelectionRange(input, selectionStart, selectionEnd) {#code-snippet:manipulasi-posisi-dan-jarak-seleksi}

Contoh Penggunaan 

<button onclick="wrapText('<b>', '</b>', document.getElementById('target-textarea'));">Bold</button>

Lihat Demo

Mendapatkan Elemen Induk dari Teks yang Terseleksi 

// http://stackoverflow.com/a/1336922
// The following will return the container element of the start or end boundary of the current selection
// `getSelectionBoundaryElement()` will select the last container element of the current multiple container selection.
// `getSelectionBoundaryElement(true)` will select the first container element of the current multiple container selection.
function getSelectionBoundaryElement(isStart) {
    var range, sel, container;
    if (document.selection) {
        range = document.selection.createRange();
        range.collapse(isStart);
        return range.parentElement();
    } else {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);
            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
        }
        if (range) {
           container = range[isStart ? "startContainer" : "endContainer"];
           // Check if the container is a text node and return its parent if so
           return container.nodeType === 3 ? container.parentNode : container;
        }   
    }
}

Contoh Penggunaan 

function getSelectionText() {#code-snippet:mendapatkan-teks-yang-terseleksi}

document.onmouseup = function() {
    if (getSelectionText().toString() !== "") {
        var parentElem = getSelectionBoundaryElement();
        parentElem.style.backgroundColor = "#ff0";
    }
};

Lihat Demo


17 Komentar

  • Unknown

    Untuk yang cara Mendapatkan Teks yang Terseleksi di bagian atas bisa ngak ya kang di kasih fungsi Copy text

  • Unknown

    pernah mikir waktu itu, seandainya formulir komen blogger ini bukan sebuah iframe pasti bisa dibuat manipulasi klik EMOT

  • Beben Koben

    walo tak ngerti, ada demo2, mayan lah menikmati :p
    tapi kalo dipikir-pikir ini seperti apa-apa yg ada pada wysiwyg editor yak **p!!!

  • budkalon

    Kalau yang kaya di blog DTE ini, yang kalau menyeleksi beberapa teks, maka akan muncul sebuah kontainer berisi 'Telusuri “teks terseleksi” di blog Telusuri “Telusuri “teks terseleksi” dengan Google” di blog', kodenya seperti apa?
    Apakah misalnya:

    function getSelectionText() {
    #code-snippet:mendapatkan-teks-yang-terseleksi
    }
    if(teks diseleksi) {
    $('#dialog').show.html('Telusuri “' + teks-yang-diseleksi + '”di blog')};

    apakah seperti di atas? atau bagaimana?

    • Taufik Nurrohman

      • Unknown

        kok pada demo saat link di click tautan gak keluar ya kang malah tooltipnya ikut lari

        • Taufik Nurrohman

          Ghahahahahh... Pakai setTimeout nggak bakalan lari-lari lagi:

          setTimeout(function() {
          tooltip.style.top = top + 'px';
          tooltip.style.left = left + 'px';
          tooltip.innerHTML = '<a href="https://www.google.com/search?q=' +txt + '">Cari <b>' + txt + '</b> di Google?</a>';
          tooltip.style.display = (txt !== "") ? "block" : "none";
          }, 100);
          • budkalon

            Makasih, jadi cara kerjanya kayak yang membuat kustom tooltip sama kustom title ya...

          • Anonim

            mas kok di blog saya gak bisa yah :(
            padahal pas pake scratchpad bisa,tapi pas disimpen gak work

  • Sunandar

    nyimak gan \o/

  • M. Alex Joenaedi

    seperti yang dibilang mas nandar, sambil belajar dan memahami nyimak aja dulu

  • kontol ajing pepek

    maaf kalo out of topic.. apa mas taufik dan sobat2 disini pernah ngalami pengomentar dengan openid seperti ini?

    anonymous & name/url emang sudah tidak saya berlakukan, lahh itu bisa begitu layaknya name/url .. mohon solusinya kira-kira apa selain harus menggunakan sistem komentar dengan akun google..

  • Anonim

    Banyak juga kodenya jadi sedikit pusing juga ini mas ketemu kodenya,jadi harus pelan-pelan untuk dipelajarinya.

  • Unknown

    ikutan nyimak sob :)

  • Anonim

    mumet saya bang...wlkwlkwlk

  • Imron Fhatoni

    pelajari dulu :-d

    • you

      sip

Komentar telah ditutup.