Question

My HTML is something like this :

<select>
    <option>ABC (123)</option>
    <option>XYZ (789)</option>
</select>

What I’m trying to do is: using JQuery and a regex, I replace the “(” with <span>( here’s my JQuery line:

$(this).html($(this).html().replace(/\(/g,"<span>("));

It’s working as intended in Firefox, chrome and safari, but (as usual) not behaving correctly on IE6/IE7 (the text after “(” just get removed)

Any thoughts ?

PS: I’m doing it this way because I need “(number”) to be in a different color, and <span> in a <option> is not valid.

Answer 1

You’re saying that span in an option is not valid, and yet that’s exactly what you’re trying to add. Invalid code isn’t prettier just because it happens to be valid at load-time, if you know you’re going to mess it upp later. So really, if that’s your only concern, do add this span declaratively in your HTML, rather than injecting it later.

But if you want to fix this, I think it might help if you rewrite the regex to cover the entire tag. In a lot of cases, IE doesn’t let you just change the HTML to whatever, but will use its own internal representation to fix up the code, according to its own preferences. When you write a table, for instance, IE will always internally infer a tbody, even if there isn’t any in the code. In the same manner, if you inject a <span> and there’s no </span>, IE might insert one by itself. To get around this, make sure you inject the code in its entirety in one go:

$(this).html($(this).html().replace(/\((.*?)\)/g,"<span>($1)</span>"));