Comment modifier uniquement « texte » tout en modifiant le dom en utilisant javascript

Je suis en train d'écrire une classe « incassable » en utilisant jQuery, de sorte que:Comment modifier uniquement « texte » tout en modifiant le dom en utilisant javascript

<span class=unbreakable> 
    some text in here 
    maybe with a <span title="tag">tag</span> or something 
</span>

aurait chaque espace remplacé par  . Le problème est, si je fais quelque chose comme

$(".unbreakable").html 
( replaceAll($(".unbreakable").html(), " ", "&nbsp;") 
);

Il va remplacer les espaces dans les balises aussi bien - pas bon. Donc, je cherche un moyen d'éviter les balises sans écrire moi-même un analyseur html. Quelqu'un sait-il un bon moyen de le faire?

Source

2009-10-16 B T

Bonne direction avec le CSS. Que diriez-vous de nowrap?

.unbreakable { white-space: nowrap; }

Source

2009-10-16 06:54:50

Excellente solution. Je ne savais pas que les espaces blancs existaient. J'aimerais toujours voir un moyen d'éviter les balises comme je cherchais .. Je suis sûr que je vais courir le besoin un jour. Merci! –

Ne serait pas d'ajouter:

.unbreakable { 
    white-space: pre; 
}

... à votre stylesheet plus facile?

Source

2009-10-16 06:31:58 Quentin

+1, et la note: si vous ne voulez pas tous les comportements des espaces pré-formatés (nouvelles lignes dans le texte traités comme des sauts de ligne plutôt que des espaces), vous pouvez utiliser en toute sécurité la règle CSS conjointement avec '$ ('. incassable'). html ($ ('.incassable'). html(). replace (/ \ r? \ n | \ r/g, ''));' – eyelidlessness

Oui, ce serait plus facile . Je vais aller avec le Nowrap de Jeff Meatball (je ne savais pas qu'il existait réellement). On dirait que ça fonctionne plus comme je m'y attends. –

Juste pour vous le faire savoir, pre ne fonctionne pas dans IE. Merde microsoft à l'enfer. +1 btw –

[modifier] corrigé en réponse à un commentaire. Ce n'est probablement pas compatible avec IE; n'ont pas testé sur autre chose que Firefox. C.f. How do I select text nodes with jQuery.

<script language="JavaScript" type="text/javascript" src="jquery.js" ></script> 
<link rel="stylesheet" href="styledButton.css" type="text/css" > 

<script type="text/javascript"> 
    $(document).ready(function() { 
    var NBSP = '\u00a0'; 
    $(".unbreakable").css("border", "solid red 1px").contents().each(function(x){ 
     if (this.nodeType == Node.TEXT_NODE) { 
     this.nodeValue = this.nodeValue.replace(/ /g, NBSP); 
     } 
    }); 
    }); 
</script> 
</head> 

<body> 

<div id="log" style="width: 10px"> 
    <span class="unbreakable">testing <span title="Moo">XXX YYY</span> testing 1 2 3</span> 
    <span class="breakable">(Now this is a breakable span)</span> 
    <span class="unbreakable">testing again...</span> 
</div> 

<div id="A"></div> 

</body>

Source

2009-10-16 06:54:42 Nickolay

http://jsbin.com/iqese – mpen

Merci pour tous vos efforts, mais cela ne fonctionne pas. J'ai essayé test ouais test 1 2 3 et le titre ne fonctionne pas (en indiquant ses espaces remplacement dans les balises internes) –

Gah, Désolé, lecture imprudente de ma part. En tout cas la solution CSS est meilleure si ça te convient, je m'entraînais juste en jQuery :) – Nickolay

Comment modifier uniquement « texte » tout en modifiant le dom en utilisant javascript

Répondre

Questions connexes