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

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

htmlText property (TextRange)

Browser support:

Returns the HTML source that belongs to a TextRange object as a string.

If you want to modify the contents of a TextRange object with a HTML formatted string, use the pasteHTML method. To set or retrieve the text content within a TextRange object, use the text property.

Syntax:

object.htmlText;

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

This property is read-only.

Possible values:

String that represents the contents in HTML format.

Default: this property has no default value.

Example HTML code 1:

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>