JavaScript：当文本位于文本区域内时，所选文本不会被替换

Question

I have a problem replacing a selected text inside a textarea with a predefined replacement text.

To replace a text, I have to select it and right click.

The replacement happens properly, if the text is inside a <div> or a <p> tag. But if the text is inside a <textarea> , it is not getting replaced correctly.

A sample is available in this Fiddle

Here is my code:

HTML:

<p> Select any text in this sentence and right click to replace it </p>

 <div>
  <textarea name = "intro" rows = "5" cols = "80">This text is not getting replaced as expected
  </textarea>
</div>

JS:

if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
        replaceSelectedText("<<replaced>>");
        e.preventDefault();
    }, false);
} else {
    document.attachEvent('oncontextmenu', function() {
        alert("You've tried to open context menu");
        window.event.returnValue = false;
    });
}

function replaceSelectedText(replacementTxt) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        console.log(sel);
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            console.log(range);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementTxt));
        }
    } else if (document.selection && document.selection.createRange) {
        console.log("!!")
        range = document.selection.createRange();
        range.text = replacementTxt;
    }
}

Is there something wrong with the way I implemented it?

Any suggestions would be appreciated.

Answer 1

You should use .value to change the text of the textarea.

Look at this question

Answer 2

The range container that you get for the selected text in the textarea is the div itself and not the textarea element. Therefore, when you try to insertNode a replacement text, it becomes a sibling of the textarea .

More information from here .

The problem with textarea elements is that they do not hold their contents in DOM nodes. The text value is a property of the element. When you call range.selectNode, what happens is that the range is set so as to encompass the node you pass to the function and the children node of this node, but since a textarea does not store its text in children nodes, then you select only the textarea.

You need to string replace by using the text area's selection properties and manipulate the string itself and not the DOM.

Answer 3

The problem is that the text inside a textarea cannot be accessed using window.getSelection .

To access the text, there are different selection API namely selectionStart (The index of the beginning of selected text) and selectionEnd (The index of the end of selected text).

Here is the JS code:

function ShowSelectionInsideTextarea(replacementText, eleID)
{
    var textComponent = document.getElementById(eleID);

    if (textComponent.selectionStart != undefined)
      {
        var mainStr = document.getElementById(eleID).value;
        var startPos = textComponent.selectionStart;
        var endPos = textComponent.selectionEnd;
        selectedText = textComponent.value.substring(startPos, endPos);
        mainStr= mainStr.replace(selectedText, replacementText);
        document.getElementById(eleID).innerHTML=mainStr;      
      }
}

Here is a live DEMO