2009-11-18 7 views
0

Mon HTML est quelque chose comme ceci:Regex se comporter différemment dans IE6/IE7

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

Ce que je suis en train de faire est: en utilisant JQuery et une expression régulière, je remplace le « (» avec <span>( voici mon JQuery ligne:

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

Cela fonctionne comme prévu dans Firefox, Chrome et Safari, mais (comme d'habitude) ne se comporte pas correctement sur IE6/IE7 (le texte après "(" juste supprimeront)

Toute pensée?

PS: Je le fais de cette façon parce que je dois « (nombre ») d'être dans une couleur différente, et <span> dans un <option> n'est pas valide.

+0

si la durée d'une option est pas valide, ce que cela signifie que IE soutient effectivement la norme? –

Répondre

1

Vous dites que span dans un option est pas valide, mais qui est exactement ce que vous essayez d'ajouter. Le code invalide n'est pas plus joli juste parce qu'il se trouve être valide au moment du chargement, si vous savez que vous allez le gâcher plus tard. Donc, vraiment, si c'est votre seul souci, ajoutez cette extension de façon déclarative dans votre HTML, plutôt que de l'injecter plus tard. Mais si vous voulez résoudre ce problème, je pense que cela pourrait être utile si vous réécriviez l'expression régulière pour couvrir l'ensemble de la balise. Dans de nombreux cas, IE ne vous laisse pas simplement changer le HTML en n'importe quoi, mais utilisera sa propre représentation interne pour réparer le code, selon ses propres préférences. Lorsque vous écrivez un table, par exemple, IE déduira toujours en interne un tbody, même s'il n'y en a aucun dans le code. De la même manière, si vous injectez un <span> et qu'il n'y a pas </span>, IE peut en insérer un seul. Pour contourner ce problème, assurez-vous que vous injectez le code dans son intégralité en une seule fois:

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

Merci, cela a résolu le problème, vous aviez raison sur le fait que IE insert par lui-même. –

+0

Si c'est toujours un nombre, affinez un peu la regex à $ (this) .html ($ (this) .html(). Replace (/ \ ((\ d +) \)/g, " ($ 1) ")); . S'il est possible de ne pas avoir de numéro, alors $ (this) .html ($ (this) .html(). Remplacer (/ \ ((\ d *) \)/g, " ($ 1)")) ; – nickytonline

2

Je ne pense pas que ce soit la rupture d'une regex. Les travaux ci-dessous bien dans IE7:

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

Ce qui se passe probablement est que IE6/7 ont aucune idée de la façon de rendre une durée à l'intérieur d'une option et ne vient d'afficher quoi que ce soit.

+0

Chris peut très bien avoir raison car, je crois, même les éléments en ligne ne sont pas valides dans un élément OPTION. –

0

Je n'ai pas IE7 mais dans IE6 les éléments suivants

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

cède

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

et s'affiche correctement (à part que <strong> n'a pas d'effet). Fonctionne aussi bien lors de l'utilisation <span> au lieu de <strong>

Questions connexes