我有一个< div />这是可以容忍的,并且可以包含几种类型的
HTML元素,例如< span />,< a />,< b />,< u />等等.
现在,当我在我的目标中选择文本时,我希望有一个按钮来删除选择中的所有样式.
例1:
选择:
Hello <b>there</b>. I am <u>a selection</u>
会成为:
Hello there. I am a selection
例2:
选择:
<a href="#">I am a link</a>
会成为:
I am a link
你明白了……
我找到了这个有用的功能https://stackoverflow.com/a/3997896/1503476,用自定义文本替换当前选择.但我无法先获取选择的内容,并在替换前删除标签.我怎样才能做到这一点?
解决方法
我这样做的方法是迭代选择内的节点并删除内联节点(可能单独留下< br>元素).这是一个例子,为方便起见使用我的
Rangy库.它适用于所有主流浏览器(包括IE 6),但不是很完美:例如,它不会拆分部分选定的格式元素,这意味着部分选择的格式元素被完全删除,而不仅仅是选定的部分.解决这个问题会更棘手.
演示:http://jsfiddle.net/fQCZT/4/
码:
var getComputedDisplay = (typeof window.getComputedStyle != "undefined") ? function(el) { return window.getComputedStyle(el,null).display; } : function(el) { return el.currentStyle.display; }; function replaceWithOwnChildren(el) { var parent = el.parentNode; while (el.hasChildNodes()) { parent.insertBefore(el.firstChild,el); } parent.removeChild(el); } function removeSelectionFormatting() { var sel = rangy.getSelection(); if (!sel.isCollapsed) { for (var i = 0,range; i < sel.rangeCount; ++i) { range = sel.getRangeAt(i); // Split partially selected nodes range.splitBoundaries(); // Get formatting elements. For this example,we'll count any // element with display: inline,except <br>s. var formattingEls = range.getNodes([1],function(el) { return el.tagName != "BR" && getComputedDisplay(el) == "inline"; }); // Remove the formatting elements for (var i = 0,el; el = formattingEls[i++]; ) { replaceWithOwnChildren(el); } } } }