使用javascript將所選文字設為粗體

Question

我的標記中有文字：

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum condimentum consectetur tellus, at bibendum felis ultrices eu.
Nullam nibh urna, euismod a blandit ut, fermentum a leo. Maecenas pharetra elementum fringilla.
Quisque condimentum, nibh quis elementum porttitor, magna libero malesuada dolor, ut feugiat tortor lectus ac turpis. Integer tristique molestie enim, sit amet commodo risus tempus non.
</div>

當用戶選擇文本並按CTRL + Enter時，我想用<b></b>標簽包裹所選文本。 我必須獲取選定的文本，但是找不到如何用標記將其包裝起來。 這是我所擁有的：

function getSelectedText () {
    if (window.getSelection) {
        return window.getSelection ().toString ();
    }
    else {
        if (document.selection) {
            return document.selection.createRange ().text;
        }
    }
    return '';
}

$ (document).ready (function() {

    // User pressed a key 
    $ (document).keydown (function(e) {
        // is it CTRL+ENTER?
    if (e.which == 13 && e.ctrlKey) {
            alert('You have selected ' + getSelectedText ());
            // now I need to highlight the text I got
            // ????
    }
    });
});

請注意！ 一個簡單的查找/替換操作不起作用，如果用戶選擇了一個“ a”字母（可以在文本中找到10次），我想突出顯示他選擇的唯一“ a”字母。 我已經研究了范圍對象，但不知道如何實現它，請幫幫我。

請在jsfiddle上查看演示。

Answer 1

也許這可以幫助您： http : //code.google.com/p/rangy/

示例之一正是您所追求的。

Answer 2

您可以為此使用document.execCommand() 。 這是我對類似問題的回答： Javascript：如何取消周圍的內容范圍

Answer 3

這可以使用（在Chrome中），但是只要調用一次即可！

（在http://jsfiddle.net/HaD6k/上運行代碼）

$(document).keypress(function(e) {
    if (e.which == 13 && e.ctrlKey) {
        var s = getSelection();
        var i = s.baseOffset;
        var j = s.extentOffset;
        var t = $('div').text();
        var t0 = t.substring(0, i) + '<span class="b">' +
                 t.substring(i, j) + '</span>' +
                 t.substring(j);
        $('div').html(t0);
    }
});

它只能運行一次的原因是因為它修改了DOM來添加標簽，這意味着下次選擇偏移量和元素不連續。 我還在看...