javascript - trick to getText and setText
it is not as simple as you think to settext or get text to some element in javascript, by simply reading the textContent or write to the text content.
Below show the code on the impl of getText and setText, along with its imple comments.
/**************************************
*@Name: textcontent.js
*@Summary
* This example will shows you some technique to manipulate the text inside the
*
*
* set text to some element, we have to consider the situation when the element has child elements (including the text child elements)
*
* and get text, we have to go through the text to find one .
*
***************************************/
/**
* @Function: setText
* @Summary: setText
* @Comment: You will need to remove the original child element so that you will have a clean elemnet to insert text to
*
* NOTE: this code shows example, and is not supposed to be useful without context.
*/
function setText(elem, text) {
while (elem.firstChild) {
elem.removeChild(elem.firstChild);
}
// inject the escaped text node;
// NOTE: please do not insert the text just as simply as you think
elem.appendChild(document.createTextNode(text));
}
/**
* @Function: getText
* @Summary: getText
* @Comment: you will need to iterate through the elem's children.
*
* NOTE: this code shows example, and is not supposed to be useful without context.
*/
function getText(elem) {
var text = "";
for (var i = 0, l = elem.childNodes.length; i < l; i++) {
var cur = elem.childNodes[i];
// A text node has a nodeType === 3
if (cur.nodeType === 3)
text += cur.nodeValue;
// If it's an element we need to recurse further
else if (cur.nodeType === 1)
text += getText(cur);
}
return text;
}
and below is the test code that shows you how to use the function .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- textcontent.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../unit.js"></script>
<script type="text/javascript" src="textcontent.js"></script>
<script type="text/javascript">
window.onload = function () {
test("test get text", function () {
var b = document.getElementById("test");
var text = getText(b);
assert(text === "Hello, I'm a ninja!", "Examine the text contents of an element.");
assert(b.childNodes.length === 2, "An element and a text node exist.");
});
test("test set text", function () {
var b = document.getElementById("test");
setText(b, "Some new text");
var text = b.textContent || b.innerText;
assert(text === "Some new text", "Set a new text value.");
assert(b.childNodes.length === 1, "Only one text nodes exists now.");
});
};
</script>
<style type="text/css">
#results li.pass { color:Green }
#results li.fail { color:red}
</style>
</head>
<body>
<div id="test"><b>Hello</b>, I'm a ninja!</div>
<div id="test2"></div>
<ul id="results" />
</body>
</html>