我正在尝试编写一些代码,这些代码会突出显示在页面上选择的任何文本,以下代码在大多数情况下有效,但在范围部分选择非文本节点时则无效(有关详细信息,请参阅http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Surrounding )。
有没有什么好的方法可以将这个范围分成2个范围,并分别对这两个半边形进行加强以解决这个问题?
function makeBold() {
var selection = window.getSelection();
if (selection.rangeCount) {
var range = selection.getRangeAt(0).cloneRange();
var newNode = document.createElement("b");
range.surroundContents(newNode);
selection.removeAllRanges();
selection.addRange(range);
}
}
答案 0 :(得分:2)
您可以使用document.execCommand()
。请注意,在非IE浏览器中,您必须暂时使文档可编辑。
jsFiddle:http://jsfiddle.net/C7j5H/1/
代码:
function highlight() {
var range, sel;
// IE case
if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.execCommand("Bold", false, null);
} else if (window.getSelection) {
// Non-IE
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
document.execCommand("Bold", false, null);
document.designMode = "off";
}
}