Regex ведет себя по-разному в IE6 / IE7

Question

Мой HTML выглядит примерно так:

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

Я пытаюсь сделать следующее: используя JQuery и регулярное выражение, я заменяю "(" на <span>( вот моя строка JQuery:

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

Он работает так, как задумано в Firefox, Chrome и Safari, но (как обычно) работает неправильно в IE6 / IE7 (текст после "(" просто удаляется)

Есть мысли?

PS: Я делаю это так, потому что мне нужно, чтобы "(число") было другого цвета, а <span> в <option> недопустимо.

Answer 1

Я не думаю, что это нарушение правил. Ниже хорошо работает в IE7:

alert("(test".replace(/\(/g,"<span>("));

Что, вероятно, происходит, так это то, что IE6 / 7 не имеет ни малейшего понятия, как визуализировать диапазон внутри параметра, и просто не может ничего отобразить.

Answer 2

Вы говорите, что span в option недопустимо, и все же это именно то, что вы пытаетесь добавить. Неверный код не выглядит красивее только потому, что он действителен во время загрузки, если вы знаете, что собираетесь испортить его позже. Так что действительно, если это ваша единственная задача, добавьте этот диапазон декларативно в ваш HTML, а не вставляйте его позже.

Но если вы хотите это исправить, я думаю, что это может помочь, если вы переписываете регулярное выражение, чтобы охватить весь тег. Во многих случаях IE не позволяет вам просто изменить HTML на что-либо, а использует собственное внутреннее представление для исправления кода в соответствии со своими предпочтениями. Например, когда вы пишете table, IE всегда будет внутренне выводить tbody, даже если в коде его нет. Таким же образом, если вы вводите <span>, а </span> нет, IE может вставить его самостоятельно. Чтобы обойти это, убедитесь, что вы вводите код целиком за один раз:

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

Answer 3

У меня нет IE7, но в IE6 следующее

javascript:"<select><option>ABC (123)</option><option>XYZ (789)</option></select>".replace(/\(/g,"<strong>(")

выходы

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

И отображается правильно (кроме того, что <strong> не имеет никакого эффекта). Также отлично работает при использовании <span> вместо <strong>