Scott Hanselman

A JavaScript implementation of innerText (not innerHtml) for FireFox and non-IE browsers.

February 8, '05 Comments [10] Posted in ASP.NET | Javascript
Sponsored By

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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Tuesday, February 08, 2005 11:29:33 PM UTC
What about using .textContent?

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);
}
}

Tuesday, February 08, 2005 11:30:46 PM UTC
err, that's .textContent (smacks head)
Wednesday, February 09, 2005 12:01:08 AM UTC
Looks like .textContent works only in FireFox. So, innerHTML works only in IE and .textContent only works in FireFox.
Wednesday, February 09, 2005 12:22:01 AM UTC
You've stripped tags, but you may want some of this to deal with your &amp; &gt; &lt; entities:

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.
Wednesday, February 09, 2005 1:11:17 AM UTC
Actually in the course of my investigation I found a site that did what I had proposed.

HTMLElement.prototype.__defineGetter__("innerText", function () {
var r = this.ownerDocument.createRange();
r.selectNodeContents(this);
return r.toString();
});

Wednesday, February 09, 2005 1:14:08 AM UTC
Whoops, forgot to post my source.

http://webfx.eae.net/dhtml/ieemu/htmlmodel.html
Friday, February 18, 2005 1:32:50 AM UTC
Try the solution, I had written, that is located at ..http://www.bloglines.com/blog/glnsagar..It worked for me and it gave me 99% close to the IE's innerText.
Monday, March 28, 2005 1:59:33 AM UTC
Yeah it's really crap how IE works like that. How arrogant that they created their own programming language dialect. It's like the ebonics of programming hahaha.

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.
David Betz
Thursday, September 15, 2005 7:24:14 PM UTC
This is horseshit. You want to make a better browser - embrace and extend. Embrace the standard, embrace MS extensions.
Dee Stillery
Tuesday, November 15, 2005 4:13:43 PM UTC
W3C Crossbrower (IE/Firefox) implementation for a span element from
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]);

Jim T.
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.