I am able to highlight the text on the HTML page(rendered through gtkmozembed), which is selected, like below.
var range, sel;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
document.execCommand("HiliteColor", false, colour);
document.designMode = "off";
}
Well,it works very fine.Now i am trying to store the information(startNode, startOffset,endNode, endOffset) about the highlighted text, and next time when i open the same page,highlight the same text.
I am able to successfully store the info and retrieve them when the same page opens.
And i am trying to highlight the text using following code.
var range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
document.designMode = "on";
range.execCommand("HiliteColor", false, colour);
document.designMode = "off";
But it is not working as i am expecting. Can anyone help me to achieve the required? Thanks...
I am able to highlight the text on the HTML page(rendered through gtkmozembed), which is selected, like below.
var range, sel;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
document.execCommand("HiliteColor", false, colour);
document.designMode = "off";
}
Well,it works very fine.Now i am trying to store the information(startNode, startOffset,endNode, endOffset) about the highlighted text, and next time when i open the same page,highlight the same text.
I am able to successfully store the info and retrieve them when the same page opens.
And i am trying to highlight the text using following code.
var range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
document.designMode = "on";
range.execCommand("HiliteColor", false, colour);
document.designMode = "off";
But it is not working as i am expecting. Can anyone help me to achieve the required? Thanks...
javascript
jquery
dom
mozilla
gecko
Share
Improve this question
asked May 3, 2010 at 8:38
ganapatiganapati62522 gold badges1212 silver badges2424 bronze badges1
duplicate of highlight the text of the DOM range element,
– Bergi
CommentedAug 3, 2012 at 6:43
Add a ment
|
2 Answers
2
Reset to default
7
The execCommand method is a method of the document, not the Range. Also, hilitecolor only works in Firefox, so you should fall back to using backcolor in WebKit and Opera.
UPDATE
Fixed in IE 9.
function makeEditableAndHighlight(colour) {
var sel = window.getSelection();
var range = null;
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 highlight(colour) {
var range, sel;
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);
}
}
This page should give you all the details about highlighting via script. I haven't done it myself, so it's probably best you use the page's remendations.