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

February 8, 2005 10:06 PM Comments [10] Posted in ASP.NET | Javascript

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]

Tracked by:
"adding innerText to Mozilla and other browsers" (Lazycoder weblog) [Trackback]

Comments [10]

Permalink

« Adding Tabs to Internet Explorer (IE) an... | Home | Microsoft Fingerprint Reader - a Mini Re... »

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

Scott

Tuesday, February 08, 2005 11:30:46 PM UTC

err, that's .textContent (smacks head)

Scott

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.

Scott Hanselman

Wednesday, February 09, 2005 12:22:01 AM UTC

You've stripped tags, but you may want some of this to deal with your & > < 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.

Jeff Atwood

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

Scott

Wednesday, February 09, 2005 1:14:08 AM UTC

Whoops, forgot to post my source.

http://webfx.eae.net/dhtml/ieemu/htmlmodel.html

Scott

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.

glnsagar

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.