Javascript 删除contenteditable中所选内容内的所有HTML标记

我有一个

，它是

内容可编辑的

，可以包含多种类型的HTML元素，例如

，

，它用自定义文本替换当前选择。但是我不能先得到选择的内容，在替换它之前去掉标签。我该怎么做？



这里是一些格式化文本。请选择一些并查看格式
神奇地消失。


看，一些更格式化的内容。

还有另外一段

改变​

这是一个重复的上述答案，但与一个按钮，以改变文本
 根据您建议的函数，我在控制台上进行了一点实验后，想出了这个简洁的小脚本。但是没有测试跨浏览器兼容性

现在，您可以从所选文本中删除HTML标记，并使用您在问题中提供的功能替换它

例如，您可以使用
strip\u tags（）
from

我希望这能回答你的问题。

HTML:


你好
删除HTML​

JS:

$（文档）.ready（函数（）{
jQuery.fn.stripTags=function（）{返回this.replaceWith（this.html（）.replace（/]+>/gi'，）；}；
$（'.remove'）。单击（函数（）{
$（'.test'）.stripTags（）；
});
});​

这就是您要寻找的吗？
我这样做的方式是迭代选择中的节点并删除内联节点（可能只保留

元素）。下面是一个例子，为了方便起见使用我的库。它适用于所有主流浏览器（包括IE 6），但并不十分完美：例如，它不会分割部分选定的格式元素，这意味着部分选定的格式元素将被完全删除，而不仅仅是选定的部分。要解决这个问题将更加棘手

演示：

代码：

var getComputedDisplay=（typeof window.getComputedStyle！=“未定义”）？
功能（el）{
返回窗口.getComputedStyle（el，null）.display；
} :
功能（el）{
返回el.currentStyle.display；
};
函数替换为自己的子函数（el）{
var parent=el.parentNode；
while（el.hasChildNodes（））{
父项插入前（el.firstChild，el）；
}
父母。远程儿童（el）；
}
函数removeSelectionFormatting（）{
var sel=rangy.getSelection（）；
如果（！选择已合并）{
对于（变量i=0，范围；is除外。
var formattingEls=range.getNodes（[1]，函数（el）{
返回el.tagName！=“BR”&&getComputedDisplay（el）=“内联”；
});
//删除格式化元素
for（变量i=0，el；el=formattingEls[i++]；）{
替换为自己的子女（el）；
}
}
}
}
​
我不想替换整个周围的
div
。我正在处理
contenteditable
div
中的一个选择…是否要删除所选文本的标记？如果是，我编辑我的答案！是的，我想删除所选内容中的标记。请给我一些时间，我正在尝试制作！我正在处理
contenteditable
div中的一个选择。因此，我只需要将stripTags应用于该选择！那不行。我无法将
strip\u tags
功能应用于
selectedText
。它将返回
TypeError:input.replace不是一个函数
也许strip_tags函数不是您想要的，您可以将我的答案与@gulty的答案结合起来。我假设你已经有了一个替换字符串的解决方案，使用你提供的链接中的答案：伙计，我也得到了RANGY插件的链接，但我想不出解决方案，但你竖起了大拇指：）在Firefox中，你可以在选择时按住Ctrl键来选择多段文本。您的脚本仅从第一个选择中删除格式。@user2428118:这是真的，但没有其他浏览器支持或可能支持该设置，并且只涉及单个选择范围。因此，不久前，我不再费心处理堆栈溢出答案中的多范围情况；你是第一个抱怨的人。我将更新我的答案。可能重复的
Hello <b>there</b>. I am <u>a selection</u>

Hello there. I am a selection

<a href="#">I am a link</a>

I am a link

<div contenteditable="true">
    <p>
        Here is some <b>formatted text</b>. Please select some and watch the formatting
        <i>magically disappear</i>.
        <br>
        Look, some more <u>formatted</u> content.
    </p>
    <p>And <i>another</i> paragraph of it</p>
</div>
<button onmousedown="removeSelectionFormatting()">Change</button>​

var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.cloneContents().childNodes[0]; // This is your selected text.

<div class="test">
    Hello <b>there </b><a href="#">I am a link</a>
</div>
<button class="remove">Remove HTML</button>​

$(document).ready(function(){
    jQuery.fn.stripTags = function() { return this.replaceWith(this.html().replace(/<\/?[^>]+>/gi, '') ); };
$('.remove').click(function(){
    $('.test').stripTags();
});
});​

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);
            }
        }
    }
}
​