A JavaScript implementation of innerText (not innerHtml) for FireFox and non-IE browsers.
In the sick, twisted word of cross-browser DOM-based JavaScript, sometimes you need to get the contents of an element. You usually use element.innerHTML, but often you don't want any existing sub-tags that might be in there. You want .innerText! But, innerText is only available on IE. Poop.
So, I needed this today, and my buddy Stuart found a solution here. Sick, yes. Twisted, yes. Works, yes. Moving on.
<script type="text/javascript">
var regExp = /<\/?[^>]+>/gi;
function ReplaceTags(xStr){
xStr = xStr.replace(regExp,"");
return xStr;
}
</script>All you need to do is pass it a string and it returns the string stripped of the tags. An example is shown below to grab the text from a div without the tags.
<html>
<head>
<script type="text/javascript">
var regExp = /<\/?[^>]+>/gi;
function ReplaceTags(xStr){
xStr = xStr.replace(regExp,"");
return xStr;
}
</script>
</head>
<body>
<div id="test">
<span id="span1">Test <u><b>Test</b></u> Test <br/><a href="#">Wow</a>!</span>
</div>
<script type="text/javascript">
var xContent = document.getElementById("test").innerHTML;
var fixedContent = ReplaceTags(xContent);
alert(fixedContent);
</script>
</body>
</html>
[Eric's Weblog]
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
http://blogs.msdn.com/aoakley/archive/2003/11/12/49645.aspx
Also, you could be in for a surprise when you encounter HTML markup with embedded 'greater than' or 'less than' as part of the text. Yeah, it should be an entity, but sadly the world is full of malformed people and HTML.
HTMLElement.prototype.__defineGetter__("innerText", function () {
var r = this.ownerDocument.createRange();
r.selectNodeContents(this);
return r.toString();
});
http://webfx.eae.net/dhtml/ieemu/htmlmodel.html
When I teach programming I teach this as the #1 rule:
* Never write any application for website for Internet Explorer. Always write for the grammatically correct W3C languages and then add support for IE later.
Writing for IE and then adding 'cross-browser' support is like writing PHP and then porting to .NET. There is no form and beauty in PHP or IE. The flow, dynamic, beauty, elegance, and form of the W3C grammar and .NET are so fluid that they seem not only self-documenting, but the code just seems to fall together. Writing .NET code and hitting an icky COM component is like writing W3C code and hitting a wall with IE. The seamless beauty is halted.
Sadly, IE7 will probably still support the innerText and document.all models allowing for poor grammar and hard to understand design. Fortunately we have Firefox, which renders web applications and websites identically on Linux, Mac, and Windows....instead of us having follow the legacy model of 'cross-browser' development.
http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_manip
I tested in IE6 and Firefox 1.0. It assumes that the span only has a text child.
-------------------------------------
// get reference to the SPAN element
var SpanElemRef = document.getElementById("dynatext");
// implement SpanElemRef.innerText = "a brand new bag"
var new_txt = document.createTextNode("a brand new bag");
SpanElemRef.replaceChild(new_txt, SpanElemRef.childNodes[0]);
Comments are closed.
http://www.w3.org/TR/2003/WD-DOM-Level-3-Core-20030609/core.html#Node3-textContent
I used it in an XmlHttpRequest demo I did recently. Granted it's DOM level 3 only, but you might be able to prototype it onto an element or node if you are using IE and map it to the innerText property.
var select = document.getElementById("lookup");
select.innerHTML = "";
var items = req.responseXML.getElementsByTagName("lookupItem");
for(var count = 0; count < items.length; count++)
{
var name = items[count].getElementsByTagName("name");
var value = items[count].getElementsByTagName("value");
if(isIE)
{
appendToSelect(select, name[0].childNodes[0].nodeValue, value[0].childNodes[0].nodeValue);
}
else
{
appendToSelect(select, name[0].textContent, value[0].textContent);
}
}