在Firefox中替换所选文本

Question

如何在Firefox中使用PURE javascript将所选文本替换为另一个文本？

这是我用来得到选择:

var sel = this.getSelection();
var range = sel.getRangeAt(0);

还有这个重要的问题:
我想保留原始格式的字符(当然新字符串将具有正确的格式)
选择可以完成"跨元素"(我的意思是选择可以包含一些文本来自一个元素,如div或table,另一个元素来自另一个元素).

例如,文件:

<div>
 this is a test
</div>
<div>
<b>still a test</b>
</div>
 <table style="width:100%;">
        <tr>
            <td>
                another word</td>
            <td>
                stackoverflow</td>
        </tr>
        <tr>
            <td>
                bump</td>
            <td>
               </td>
        </tr>
    </table>

用户选择以下文本(通过一个选择):

他的测试仍然是一个测试结果

所以现在我想替换保留格式的文本,例如用new string =替换所有东西

XXX XX X XXXX XXXXX X XXXX XXXX

最终文件(更换后)将是:

<div>
 tXXX XX X XXXX
</div>
<div>
<b>XXXXX X XXXX</b>
</div>
 <table style="width:100%;">
        <tr>
            <td>
                XXXXher word</td>
            <td>
                stackoverflow</td>
        </tr>
        <tr>
            <td>
                bump</td>
            <td>
               </td>
        </tr>
    </table>

Answer 1

哇,那太可怜了!

使用Javascript

var sel, range, nodevalue, startFound, stop;

function goThroughElements(el){
    // If el is the start node, set startFound to true
    if(el.isSameNode(range.startContainer)) startFound = true;

    if(startFound){
        // If this is the start node, replace the text like this: abcd[ef gh] --> abcdxx xx
        if(el.isSameNode(range.startContainer)){
            // \w stands for a word character
            nodevalue = el.nodeValue.substring(range.startOffset).replace(/\w/g, 'x');
            el.nodeValue = el.nodeValue.substring(0, range.startOffset) + nodevalue;

        }

        // If this is the end node, replace the value like this: [abc def]gh ij -> xxx xxxgh ij
        else if(el.isSameNode(range.endContainer)){
            nodevalue = el.nodeValue.substring(0,range.endOffset).replace(/\w/g, 'x');
            el.nodeValue = nodevalue + el.nodeValue.substring(range.endOffset);

            // Now we can stop
            stop = true;
        }

        // If this is just a text node, replace the value by xxxx
        else if(el.nodeType == 3){
            el.nodeValue = el.nodeValue.replace(/\w/g, 'x')
        }
    }

    // Loop trough el's brothers
    while(el){
        // Stop if we need to
        if(stop) return;

        // If this element has child nodes, call this function again with the first child node
        if(el.hasChildNodes()){
            goThroughElements(el.childNodes[0]);
        }

        // Jump to el's brother, or quit the loop
        if(el.nextSibling)
            el = el.nextSibling;
        else
            break;
    }

}

$(document).ready(function() {
    $(this).mouseup(function(){
        // Get the selection
        sel = window.getSelection();
        range = sel.getRangeAt(0);

        // Stop must be false if the last selected text node isn't found, startFound must be false when the start isn't found
        stop = false; startFound = false;

        if(range.collapsed == false){
            // Check if the selection takes place inside one text node element
            if(range.startContainer.isSameNode(range.endContainer)){
                // ab[cdefg]h  -> aaxxxxxh
                nodevalue = range.startContainer.nodeValue;
                range.startContainer.nodeValue = nodevalue.substring(0, range.startOffset) + nodevalue.substring(range.startOffset, range.endOffset).replace(/\w/g, 'x') + nodevalue.substring(range.endOffset);
            } else {    
                // If the start node of the selection isn't the same as the end node, loop through all elements
                goThroughElements(range.commonAncestorContainer.childNodes[0]);
            }
            // Collapse selection.
            range.collapse(true);
        }            
    });
});

例

你当然可以尝试代码

也许它不是最佳解决方案,因为它开始从根搜索起始节点.这将是更快地从第一公共父元素搜索range.startContainer和range.endContainer,但我不知道该怎么做......

编辑

我将to-X函数包装在内部if(range.collapsed == false)并用于range.commonAncestorContainer.childNodes[0]从选择的开始和结束位置的公共父元素的第一个子元素开始迭代元素