Question

I have this Javascript here:

function getTxt(obj) {
var first = obj.innerHTML.substring(0, obj.innerHTML.indexOf('<span class=\"item2\">'));
var second = obj.innerHTML.substring(obj.innerHTML.indexOf('<span class=\"item2\">'));
var f = first.replace(/(<([^>]+)>)/ig,'');
var s = second.replace(/(<([^>]+)>)/ig,'');
alert(first + "\n" + second + "\n" + f + "\n" + s);
}

and the HTML:

<span class="item" onclick="getTxt(this)"><span class="item1">MyName</span><span class="item2">555-555-5555</span></span>

In most browsers (FireFox, Chrome, Safari, Opera) it will alert:

<span class="item1">MyName</span>
<span class="item2">555-555-5555</span>
MyName
555-555-5555

as expected. However, in IE9 it alerts:

<span class="item1">MyName</span><span class="item2">555-555-5555</span>

MyName555-555-5555

So it puts the vars “first” and “second” together into var “first”, and puts “f” and “s” together into var “f”.

I would like to know if there is anyway to correct this for IE9 (and probably other version of IE also) to work as it does in the other browsers.

Answer 1

Pattern matching innerHTML is particularly a problem in IE and is generally a bad idea. IE often does NOT return to you the same HTML that was originally in the page. It often requotes or removes quotes, changes the order of attributes, changes case, etc… IE is clearly reconstituting the HTML rather than give you back what was originally in the page. As such, you cannot reliably pattern match innerHTML in IE. There are some specific things you can probably match (the start of tags), but you can’t expect attributes to be in a specific spot or to have a specific format.

If you console.log(obj.innerHTML) in IE, you will likely see what I’m talking about. It will look different.

A more robust solution is to use the DOM functions to navigate the specific elements or CSS selectors to find specific objects and then change attributes or innerHTML on a single specific element. Let the DOM navigation find the right element for you rather than parsing the HTML yourself.

If you provide a desired before and after sample of the HTML and describe what you’re trying to accomplish, folks here can probably help you get the job done with DOM manipulation rather than HTML parsing.

I don’t know which selector libraries you have available to you or which browsers you’re targeting, but in jQuery, you could do this like this:

function getText(obj) {
    return $(obj).find(".item1").text();
}

In plain javascript, in IE8 and above and all other modern browsers, you can use this:

function getText(obj) {
    return obj.querySelectorAll(".item1").innerHTML;
}

If you had to support back to IE6 or IE7, I’d suggest getting the Sizzle library and use that for your queries:

function getText(obj) {
    return Sizzle(".item1", obj)[0].innerHTML;
}