Question

我尝试用js标记文本，我选择文本，然后点击用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();
    });
}

jsFiddle中的示例：http://jsfiddle.net/liron_e/g7QTp/

如果你试图标记＆＃34;是某些＆＃34;你会看到问题..

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

另外，当我点击另一个按钮并返回上一个样式时，我想删除span标记。

Answer 1

首先var n = document.createElement('span'); // create object

然后document.appendchiild(n) // put n into HTML-DOM

然后n.className = "Mark"; // property also in HTML-DOM, property of SPAN tag ?

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

不要忘记：var n是本地的，不是全局的。

包装和展开样式文本

1 个答案: