Выделите выделенный текст жирным шрифтом, используя 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
            // ????
    }
    });
});

Обратите внимание! Простой поиск / замена не подходит, если пользователь выбрал одну букву «а», которую можно найти 10 раз втекст, я хочу выделить только «а» он выбрал.Я изучал объекты дальности, но не могу понять, как этого достичь, помогите мне, пожалуйста.

Пожалуйста, посмотрите демонстрацию на 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 для добавления тегов, что означает, что в следующий раз при смещении выделения элементы не будут смежными. Я все еще смотрю на это ...