可以将当前选择的文字进行标记为其他颜色
<div onclick="ITEM.mark.ColorizeSelection('yellow');">标识</div >
<div onclick="ITEM.mark.ColorizeSelection('')">取消</div >
//标记类库
if(!ITEM.mark){
ITEM.mark ={
GetNextLeaf: function (node) {
while (!node.nextSibling) {
node = node.parentNode;
if (!node) {
return node;
}
}
var leaf = node.nextSibling;
while (leaf.firstChild) {
leaf = leaf.firstChild;
}
return leaf;
},
GetPreviousLeaf:function(node) {
while (!node.previousSibling) {
node = node.parentNode;
if (!node) {
return node;
}
}
var leaf = node.previousSibling;
while (leaf.lastChild) {
leaf = leaf.lastChild;
}
return leaf;
},
// If the text content of an element contains white-spaces only, then does not need to colorize
IsTextVisible:function (text) {
for (var i = 0; i < text.length; i++) {
if (text[i] != ' ' && text[i] != '\t' && text[i] != '\r' && text[i] != '\n')
return true;
}
return false;
},
ColorizeLeaf:function (node, color) {
if (!ITEM.mark.IsTextVisible(node.textContent))
return;
var parentNode = node.parentNode;
if(!parentNode)
return;
// if the node does not have siblings and the parent is a span element, then modify its color
if (!node.previousSibling && !node.nextSibling) {
if (parentNode.tagName.toLowerCase() == "span") {
parentNode.style.backgroundColor = color;
return;
}
}
// Create a span element around the node
var span = document.createElement("span");
span.style.backgroundColor = color;
var nextSibling = node.nextSibling;
parentNode.removeChild(node);
span.appendChild(node);
parentNode.insertBefore(span, nextSibling);
},
ColorizeLeafFromTo: function (node, color, from, to) {
var text = node.textContent;
if (!ITEM.mark.IsTextVisible(text))
return;
if (from < 0)
from = 0;
if (to < 0)
to = text.length;
if (from == 0 && to >= text.length) {
// to avoid unnecessary span elements
ITEM.mark.ColorizeLeaf(node, color);
return;
}
var part1 = text.substring(0, from);
var part2 = text.substring(from, to);
var part3 = text.substring(to, text.length);
var parentNode = node.parentNode;
var nextSibling = node.nextSibling;
parentNode.removeChild(node);
if (part1.length > 0) {
var textNode = document.createTextNode(part1);
parentNode.insertBefore(textNode, nextSibling);
}
if (part2.length > 0) {
var span = document.createElement("span");
span.style.backgroundColor = color;
var textNode = document.createTextNode(part2);
span.appendChild(textNode);
parentNode.insertBefore(span, nextSibling);
}
if (part3.length > 0) {
var textNode = document.createTextNode(part3);
parentNode.insertBefore(textNode, nextSibling);
}
},
ColorizeNode:function (node, color) {
var childNode = node.firstChild;
if (!childNode) {
ITEM.mark.ColorizeLeaf(node, color);
return;
}
while (childNode) {
// store the next sibling of the childNode, because colorizing modifies the DOM structure
var nextSibling = childNode.nextSibling;
ITEM.mark.ColorizeNode(childNode, color);
childNode = nextSibling;
}
},
ColorizeNodeFromTo:function (node, color, from, to) {
var childNode = node.firstChild;
if (!childNode) {
ITEM.mark.ColorizeLeafFromTo(node, color, from, to);
return;
}
for (var i = from; i < to; i++) {
ITEM.mark.ColorizeNode(node.childNodes[i], color);
}
},
ColorizeSelection:function (color) {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
document.execCommand("BackColor", false, color);
return;
}
// all browsers, except IE before version 9
if (window.getSelection) {
var selectionRange = window.getSelection();
if (selectionRange.isCollapsed) {
return;
}
var range = selectionRange.getRangeAt(0);
// store the start and end points of the current selection, because the selection will be removed
var startContainer = range.startContainer;
var startOffset = range.startOffset;
var endContainer = range.endContainer;
var endOffset = range.endOffset;
// because of Opera, we need to remove the selection before modifying the DOM hierarchy
selectionRange.removeAllRanges();
if (startContainer == endContainer) {
//同一个节点时,直接标记颜色
ITEM.mark.ColorizeNodeFromTo(startContainer, color, startOffset, endOffset);
} else {
if (startContainer.firstChild) {
var startLeaf = startContainer.childNodes[startOffset];
} else {
//标记第一段节点
var startLeaf = ITEM.mark.GetNextLeaf(startContainer);
ITEM.mark.ColorizeLeafFromTo(startContainer, color, startOffset, -1);
}
if (endContainer.firstChild) {
if (endOffset > 0) {
var endLeaf = endContainer.childNodes[endOffset - 1];
} else {
var endLeaf = ITEM.mark.GetPreviousLeaf(endContainer);
}
} else {
var endLeaf = ITEM.mark.GetPreviousLeaf(endContainer);
ITEM.mark.ColorizeLeafFromTo(endContainer, color, 0, endOffset);
}
while (startLeaf) {
var nextLeaf = ITEM.mark.GetNextLeaf(startLeaf);
ITEM.mark.ColorizeLeaf(startLeaf, color);
if (startLeaf == endLeaf) {
break;
}
startLeaf = nextLeaf;
}
}
} else {
// Internet Explorer before version 9
document.execCommand("BackColor", false, color);
}
}
}
}