Javascript 换行和展开样式文本

我试着用js标记文本，我选择文本，然后点击按钮，用span标记包裹所选区域-但是如果我选择了一半有样式的区域，它将从所选区域移除样式并放置span

这是我的代码：

function markText() {
    var sel, range;

    if (window.getSelection) {
        sel = window.getSelection();

        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            selectedText = range.toString();
            range.deleteContents();
            var n = document.createElement('span');
            n.className = "Mark";

            n.appendChild(document.createTextNode(selectedText));
            range.insertNode(n);
        }
    }
}

function removeMarks() {
    $(".Mark").each(function () {
        $(this).contents().unwrap();
    });
}

JSFIDLE中的示例：

如果你试着标记“是某个”，你就会发现问题所在

我还希望，如果我从每个div的2行或更多行中选择文本，它将在正确的位置创建span标记

---

此外，我想在单击其他按钮并返回到上一个样式时删除span标记。

first

var n=document.createElement（'span'）；//创建对象

然后

document.appendchiild（n）//将n放入HTML-DOM中

然后

n.className=“Mark”//属性，SPAN标记的属性？

document.createTextNode(selectedText)  // must return a pointer for n.appendChild()

---

别忘了：var

n

是局部的而不是全局的。

我猜你的意思是包裹而不是扭曲。。。检查这一点没有帮助…：（你在使用jQuery吗？如果是，那么就使用jQuery，避免使用类似

n.appendChild（document.createTextNode（selectedText））的东西。）

您所问的是一个很好的问题，这个问题受到很多因素的限制。这将让您了解如何从选定的文本中获取html标记并保留它以突出显示，而且它也会。在第一个示例中，选择粗体文本，在第二个示例中，选择跨div。我已将您的小提琴的内容添加到我的小提琴中，以便警报框清楚地显示html选择我想强调的问题是，浏览器会自动使所选的html有效，所以即使只选择开始标记