Выбор текста через 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.

UPDATE

Исправлено для работы в 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

Как я упомянул в аналогичном вопросе в эти дни, есть плагин jQuery.

Answer 3

Все, что вам нужно (на основе ваших комментариев), можно найти здесь: http://www.awesomehighlighter.com/webliter.js

У меня нет времени на извлечение соответствующих частей, но посмотрите, например, на Webliter.prototype.highlight (просто найдите это в этом файле)

Вы также можете использовать jQuery, например, этот плагин: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Answer 4

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

переменная 'a' получит строковое значение чего-либо внутри элемента с идентификатором 'elementID'.

Это нормально?