getselection & surroundContents à travers plusieurs tags
j'ai un script qui change la couleur de fond du texte qui a été sélectionné. Cependant, je suis confronté à un problème lorsque le texte est sélectionné à travers plusieurs éléments/tags.
le code que j'ai est:
var text = window.getSelection().getRangeAt(0);
var colour = document.createElement("hlight");
colour.style.backgroundColor = "Yellow";
text.surroundContents(colour);
et l'erreur étant sortie est:
Error: The boundary-points of a range does not meet specific requirements. =
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
Line: 7
je crois que cela a à voir avec la fonction getRange() bien que je ne sache pas trop comment procéder puisque je suis un débutant à javascript.
y a-t-il un autre moyen de reproduire ce que j'essaie de réaliser?
Merci beaucoup.
2 réponses
cette question a été posée aujourd'hui: Comment puis-je mettre en surbrillance le texte de L'objet DOM Range?
voici ma réponse:
ce qui suit devrait faire ce que vous voulez. Dans les navigateurs non-IE, il se met en mode design, applique une couleur d'arrière-plan, puis éteint designMode à nouveau.
mise à JOUR
fixé au travail dans IE 9.
function makeEditableAndHighlight(colour) {
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 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);
}
}
je pense que l'utilisation de marque.js Bibliothèque est grand dans ce cas. L'intention de la Bibliothèque est de mettre en évidence toutes les instances d'un certain mot dans le document HTML, mais il peut être modifié à travers la fonction d'option filter , et des attributs de portée supplémentaires peuvent être ajoutés à travers la fonction d'option chaque .
function markFunc(node, text, color) {
var instance = new Mark(node);
instance.mark(text, {
"element": "span",
"className": color,
"acrossElements": true,
"separateWordSearch": false,
"accuracy": "partially",
"diacritics": true,
"ignoreJoiners": true,
"each": function(element) {
element.setAttribute("id", "sohayb");
element.setAttribute("title", "sohayb_title");
},
"done":function(totalMarks) {
window.getSelection().empty();//This only in Chrome
console.log("total marks: " + totalMarks);
},
"filter": function(node, term, totalCounter, counter) {
var res = false;
if (counter == 0) {
res = selectionRange.isPointInRange(node, selectionRange.startOffset);
} else {
res = selectionRange.isPointInRange(node, 1);
}
console.log("Counter: " + counter + ", startOffset: " + selectionRange.startOffset);
return res;
}
});
};
Cochez cette JSFiddle échantillon terminé code qui met en évidence la sélection de l'utilisateur, même à travers plusieurs éléments HTML.