通过 JavaScript 选择文本

Question

我想选择 Html 页面上的文本并将其设为粗体，我正在使用以下代码

<script type="text/javascript" >


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

        return document.selection.createRange().text; 
    } 
} 
$(document).ready(function(){
 $("*").live("mouseup",
    function() {
        selection = getSelectedText(); 
        alert(selection);
        if(selection.length >= 3) {

            $(this).html($(this).html().replace(selection, "<b>" + selection + "</b>") );

        }       
    }
); 
});

</script>

此代码工作正常但是当文本位于两个不同的段落/ Div 或文本之间存在链接时，它似乎不起作用。

我怎样才能让它工作？

Answer 1

如果您想对当前选择进行某种突出显示，使用内置的document.execCommand() 是最简单的方法。它适用于所有主流浏览器。

以下内容应该对任何选择执行您想要的操作，包括跨越多个元素的选择。在非 IE 浏览器中，它会打开 designMode，应用背景颜色，然后再次关闭 designMode。

更新

固定在 IE 9 中工作。

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlightSelection(colour) {
    var range;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

document.onmouseup = function() {
    highlightSelection("red");
};

现场示例：http://jsfiddle.net/eBqBU/9/

Answer 2

a=document.getElementById('elementID').innerHTML;

变量 'a' 将获取元素内任何 id 为 'elementID' 的字符串值。

这样好吗？

Answer 3

您需要的一切（基于您的 cmets）都可以在这里找到：http://www.awesomehighlighter.com/webliter.js

我没有时间提取相关部分，但请查看 Webliter.prototype.highlight 中的示例（只需在该文件中搜索即可）

您也可以使用 jQuery，例如这个插件：http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html