使用 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 时，我想用 标签包裹所选文本。我必须获取选定的文本，但找不到如何用标记包装它。这是我所拥有的：

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 次的单个“a”字母，我想突出显示他只选择了“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 以添加标签，这意味着下次选择偏移量和元素不连续。我还在看那个...