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

示例

您当然可以try the code

可能它不是最佳解决方案，因为它开始从根搜索起始节点。从range.startContainer和range.endContainer的第一个共同父元素进行搜索会更快，但我不知道该怎么做...

修改

我将{-1}}中的to-X函数包装起来，并使用if(range.collapsed == false)来开始迭代选择的开始和结束位置的公共父项的第一个子元素。 p>

在Firefox中替换所选文本

1 个答案: