Replace Selected Text In Firefox

How can I replace the selected text with another text using PURE javascript, in Firefox? This I use to get the selection: var sel = this.getSelection(); var range = sel.getRangeAt(

Solution 1:

Wooove, that was a pitty!

Javascript

var sel, range, nodevalue, startFound, stop;

functiongoThroughElements(el){
    // If el is the start node, set startFound to trueif(el.isSameNode(range.startContainer)) startFound = true;
    
    if(startFound){
        // If this is the start node, replace the text like this: abcd[ef gh] --> abcdxx xxif(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 ijelseif(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 xxxxelseif(el.nodeType == 3){
            el.nodeValue = el.nodeValue.replace(/\w/g, 'x')
        }
    }
    
    // Loop trough el's brotherswhile(el){
        // Stop if we need toif(stop) return;
        
        // If this element has child nodes, call this function again with the first child nodeif(el.hasChildNodes()){
            goThroughElements(el.childNodes[0]);
        }
        
        // Jump to el's brother, or quit the loopif(el.nextSibling)
            el = el.nextSibling;
        elsebreak;
    }
    
}
    
$(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 elementif(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 elementsgoThroughElements(range.commonAncestorContainer.childNodes[0]);
            }
            // Collapse selection.
            range.collapse(true);
        }            
    });
});

Example

You can try the code of course

Maybe it's not the optimal solution, since it starts searching for the start node from the root. It would be faster to search from the first common parent element of range.startContainer and range.endContainer, but I don't know how to do that...

Edit

I wrapped the to-X functions inside if(range.collapsed == false) and used range.commonAncestorContainer.childNodes[0] in order to start iterating through the elements from the first child of the common parent of the start and end position of the selection