开发者

Selecting Text through JavaScript

I want to select text thats is on a Html page and make it BOLD, I am using the following Code

<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>

This Code works Fine But when the text is in two different paragraphs/ Div or if there is a link between the text then it doesnt seem to work.

How Could i Make it Work ?


If you want to do some kind of highlighting of the current selection, using the built-in document.execCommand() is the easiest way. It works in all major browsers.

The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

UPDATE

Fixed to work in 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");
};

Live example: http://jsfiddle.net/eBqBU/9/


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

variable 'a' will get the string value of anything inside the element with an id 'elementID'.

Is this ok?


Everything you need (based on your comments) can be found here: http://www.awesomehighlighter.com/webliter.js

I don't have time to extract the relevant parts but take a look for example in Webliter.prototype.highlight (just search for this in that file)

You can also use jQuery for example this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜