javascript - 范围的边界点不满足特定要求

Question

我正在编写一个脚本，用户需要能够在该脚本上选择一些通过 ajax 发送到后端脚本以进行进一步处理的文本。

我可以选择纯文本节点，也可以选择其中包含粗体、斜体或下划线文本的文本节点。

例如

<p>This is <strong>some</strong> cool <em>italic</em> text, <u>really!</u></p>

所以，这很有效，这很酷。

但是，问题是，如果文本节点以粗体、斜体或带下划线的文本或什至标题开头，它会在 Firefox 控制台上输出以下错误:

The boundary-points of a range does not meet specific requirements." code: "1 range.surroundContents($('<span...wAnno_'+newLen+'"></span>').get(0));

当用户选择如下内容时输出错误:

<strong>Mark says</strong> Hi

或

<em>Mark says</em> Hi

或

<u>Mark says</u> Hi

即使文本包含在标题标签内，也会输出相同的错误，例如 <h2>test</h2>

我的代码如下:

var select = window.getSelection();
var parents = $(select.focusNode).parents('.the-content');

if($(select.focusNode).parent().hasClass('.highlighted')) {
    alert('This text is already highlighted');
} else {
    for(var i = 0; i < select.rangeCount; i++) {
        var range = select.getRangeAt(i); 
        range.surroundContents($('<span class="newHighlight" id="newHigh_'+newLen+'"></span>').get(0));
    }
}

var selectedText = select.toString();

我需要帮助来解决这个问题。

代码方面的帮助会很棒。

Answer 1

问题是 surroundContents Range的方法|不能在开始和结束边界位于不同元素内的范围上工作，因为在一个元素内包围这样一个范围的内容不会生成有效的 HTML。如果您只需要更改 Range 的背景颜色，您可以对 document.execCommand 使用以下技巧:

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // Non-IE case
        sel = window.getSelection();
        if (sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        // Use HiliteColor since some browsers apply BackColor to the whole block
        if ( !document.execCommand("HiliteColor", false, colour) ) {
            document.execCommand("BackColor", false, colour);
        }
        document.designMode = "off";
    } else if (document.selection && document.selection.createRange) {
        // IE case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

否则，您需要遍历该范围内的文本节点，并用 <span> 包围每个节点，这不是微不足道的。我一直在开发一个跨浏览器范围和选择库，其中包含一个模块，用于将 CSS 类应用于 http://code.google.com/p/rangy/ 上的选择或范围的内容。 ，尽管该模块距离记录和发布还有几天的时间。