In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > properties > text (TextRange)

text property (TextRange)

Browser support:


		10.5

Sets or retrieves a string that specifies the text within a TextRange object.

If you want to get the contents of a TextRange object in HTML format, use the htmlText property. To replace the contents with a HTML formatted string, use the pasteHTML method.

In other browsers, use the toString method of the selectionRange object for similar functionality.

Syntax:

object.text;

You can find the related objects in the Supported by objects section below.

This property is read/write.

Possible values:

String that sets or retrieves the text content of the TextRange object.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the text property:

<head>
    <script type="text/javascript">
        function GetSelectedText () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var mySelection = window.getSelection ();
                var selStr = mySelection.toString ();
                alert (selStr);
            }
            else {
                if (document.selection) {        // Internet Explorer
                    var textRange = document.selection.createRange ();
                    alert (textRange.text);
                }
            }
        }
    </script>
</head>
<body>
    <div>Please select <b>all</b> or a <i>part</i> of this text.</div>
    <br />
    <button onclick="GetSelectedText ();">Get selected text!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the htmlText and text properties:

<head>
    <script type="text/javascript">
        function Init () {
            UpdateInfo ();

            if ('onselectionchange' in document) {  // Internet Explorer
                    // the attachEvent method can also be used in IE9,
                    // but we want to use the cross-browser addEventListener method if possible
                if (document.addEventListener) {    // IE from version 9
                    document.addEventListener ("selectionchange", UpdateInfo, false);
                }
                else {
                    if (document.attachEvent) {     // IE before version 9
                        document.attachEvent ("onselectionchange", UpdateInfo);
                    }
                }
            }
            else {
                if (document.addEventListener) {    // Firefox, Opera, Google Chrome and Safari
                    document.addEventListener ("mouseup", UpdateInfo, false);
                }
            }
        }

        function UpdateInfo () {
            var info = document.getElementById ("info");
            var selText = "";
            var selHTML = "";

            info.innerHTML = "";
            
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selectionRange = window.getSelection ();
                selText = selectionRange.toString ();
                    // similar to the htmlText property in Internet Explorer
                if (selectionRange.rangeCount > 0) {
                    var range = selectionRange.getRangeAt (0);
                    var docFragment = range.cloneContents ();
                    var tmpDiv = document.createElement ("div");
                    tmpDiv.appendChild (docFragment);
                    selHTML = tmpDiv.innerHTML;
                }
            }
            else {          // Internet Explorer before version 9
                var textRange = document.selection.createRange ();
                selText = textRange.text;
                selHTML = textRange.htmlText;
                
            }

            var message = "The text content of the selection:<br />";
            message += selText + "<br /><br />";
            message += "The contents in HTML format:<br />";
            selHTML = selHTML.replace (/</g, "&lt;");
            message += selHTML;

            info.innerHTML = message;
        }

    </script>
</head>
<body onload="Init ();">
    <div style="width:350px; background-color:#e0e0a0;">
        <nobr>Select <b>some content</b> within this field.</nobr>
        <nobr>The <i>selected content</i> is visible in the field below</nobr>
        <nobr>in text and HTML format.</nobr>
    </div>
    <br /><br />
    <div id="info" style="background-color:#e0c0a0;" unselectable="on"></div>
</body>