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
精彩评论