The Text type in JavaScript

The text type represents the plain text of an HTML document's element, which may or may not include escaped HTML characters. However, the HTML code is excluded from the document's text node.

Text node has following characteristics:

nodeType: 3
nodeName : #text
nodeValue : Text contained in the node.
parentNode : Element
childNode : Not supported.

The text type methods

The following methods allow manipulation of text type:

appendData(text) – Appends ‘text’ data to the end of node.
deleteData(offset, count) – Deletes ‘count’ number of characters starting at ‘offset’ position.
insertData(offset, text) – Inserts ‘text’ data at ‘offset’ position.
replaceData(offset, count, text) – Replaces the text starting at index ‘offset’ with ‘text’ data upto ‘count’ letters.
splitText(offset) – Splits ‘text’ node at ‘offset’ position into two parts.
substringData(offset, count) – Extracts the string from ‘offset’ position upto ‘count’ position.
normalize() – This combines two or more text nodes into one text node with nodeValue being concatenation of individual nodeValues.
nodeValue.length or data.length – Returns length of the characters in text node. Space is also considered as a text node, and returns length of 1.
createTextNode(“text string”) – Creates new text nodes accepting text string to be inserted to node as argument.

Example how to add multiple text elements to a paragraph and normalize them

<!DOCTYPE html>
<html>

<body>
    <script>
    //Create para elemnt with id = &ldquo;para&rdquo;
        var element = document.createElement("p");
        element.className = "para";
        //First text node
        var text = document.createTextNode("Hello World! ");
        element.appendChild(text);
        //Second text node
        var text2 = document.createTextNode("Good morning!");
        element.appendChild(text2);
        //Append the para to body element.
        document.body.appendChild(element);
        function normAlize() {
		    //Outputs : 2
            alert("Before normalizing length is " + element.childNodes.length);
            //Outputs : Hello World!
            alert("Phrase #1: " + element.childNodes[0].nodeValue);
            //Outputs : Good morning!
            alert("Phrase #2: " + element.childNodes[1].nodeValue);
            element.normalize();
            //Outputs : 1
            alert("After normalizing length is " + element.childNodes.length);
            //Outputs : Hello World! Good morning!
            alert("Full: " + element.firstChild.nodeValue); 
	    }	
    </script>
    
    <p style="font-size:smaller; color:#555;">The phrase above is combined
      of two <b>text types</b>.</p>
    <button onclick="normAlize()">Analyse</button>
</body>

</html>

›› go to examples ››

The Text type in JavaScript

The text type methods

Example how to add multiple text elements to a paragraph and normalize them

Comments

About

Contact

Get Connected