javascriptselectedtext

Delete particular Text before and after the selected text javascript


I want to delete some particular text before and after the selected text.For example if the text is:

<p>This is a &lt;random>sentence&lt;/random> that i am writing<p>

If the user selects text,it should remove <random> and </random> from the text and text will be like this.

This is a sentence that i am writing.

If the user selects anything other than 'sentence',nothing will happen. I know how to select a particular text but i dont know the next step on how to remove text before and after a particular text.Is it possible?


Solution

  • function replaceSelection() {
        var sel, range, fragment;
    
        if (typeof window.getSelection != "undefined") {
            // IE 9 and other non-IE browsers
            sel = window.getSelection();
    
            // Test that the Selection object contains at least one Range
            if (sel.getRangeAt && sel.rangeCount) {
                // Get the first Range (only Firefox supports more than one)
                range = window.getSelection().getRangeAt(0);
                var selectedText = range.toString();
                var replacementText = selectedText.replace(/&lt;\/?random>/, '');
                range.deleteContents();
    
                // Create a DocumentFragment to insert and populate it with HTML
                // Need to test for the existence of range.createContextualFragment
                // because it's non-standard and IE 9 does not support it
                if (range.createContextualFragment) {
                    fragment = range.createContextualFragment(replacementText);
                } else {
                    // In IE 9 we need to use innerHTML of a temporary element
                    var div = document.createElement("div"), child;
                    div.innerHTML = replacementText;
                    fragment = document.createDocumentFragment();
                    while ( (child = div.firstChild) ) {
                        fragment.appendChild(child);
                    }
                }
                var firstInsertedNode = fragment.firstChild;
                var lastInsertedNode = fragment.lastChild;
                range.insertNode(fragment);
                if (selectInserted) {
                    if (firstInsertedNode) {
                        range.setStartBefore(firstInsertedNode);
                        range.setEndAfter(lastInsertedNode);
                    }
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE 8 and below
            range = document.selection.createRange();
            var selectedText = range.text;
            var replacementText = selectedText.replace(/&lt;\/?random>/, '')        
            range.pasteHTML(replacementText);
        }
    }
    <div onmouseup="replaceSelection()"><p>This is a &lt;random>sentence&lt;/random> that i am writing<p></div>