Comment conserver les sauts de ligne lors de l'utilisation .texte() méthode pour jQuery?

Je suis en train de réaliser un de dactylographie effet et mon contenu est composé d'un lot d'entités HTML. Le problème avec l'aide de .html() est que depuis qu'il écrit chaque lettre à un moment, il va taper & puis l puis t puis ; et enfin, il allait changer de <.

HTML

<p id="src">
&lt;!DOCTYPE html&gt;
&lt;!--[if lt IE 7]&gt;      &lt;html class=&quot;no-js lt-ie9 lt-ie8 lt-ie7&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 7]&gt;         &lt;html class=&quot;no-js lt-ie9 lt-ie8&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 8]&gt;         &lt;html class=&quot;no-js lt-ie9&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if lt IE 9]&gt;      &lt;html class=&quot;no-js lt-ie9&quot;&gt; &lt;![endif]--&gt;
</p>
<p id="typed-paragraph">
    <span id="target"></span>
    <span id="typed-cursor">|</span>
</p>

CSS

#src {
    display: none;
}

jQuery

(function(){
    var srcText = $("#src").html();
        i = 0;
        result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i].replace("\n", "<br />");
        $("#target").html(result);
    }, 150); //the period between every character and next one, in milliseonds.
})();

Vous pouvez voir un exemple ici
http://jsfiddle.net/j9KF5/9/

Mais si j'utilise .texte() puis je perds tous les sauts de ligne.

En fin de compte, comment je peux corriger les entités problème ou le saut de ligne problème?

Essayez de ne pas encoder() fonction javascript à la page html que vous essayez de rendre à la volée de manière à ce que votre html char codes sont remplacés par les informations nécessaires avant de commencer l'impression.
ce n'est vraiment pas utile.
Veuillez inclure un exemple complet dans la question elle-même, et pas seulement un lien. "Pour être clair, des liens vers jsfiddle et des services similaires sont OK, mais d'une question ou d'une réponse doit se tenir debout sur ses propres. Assez de renseignements qui doivent être inclus dans un post encore le rendre utile pour les futurs visiteurs, même si tous les liens ont été à la pause, en d'autres termes." meta.stackexchange.com/a/151616/133242
FWIW, j'aime bien ce "multi-ligne de chaîne" approche: jsfiddle.net/j9KF5/13

InformationsquelleAutor anita | 2014-03-27

33

Vous n'avez pas besoin de vous soucier des entités HTML, ni aucun complexe de la chaîne de remplacement.

Tous vous avez besoin est un peu de CSS:
```
#target {
    white-space: pre;
}
```
et l'utilisation de la .text() approche:
```
(function(){
    var srcText = $("#src").text().trim();
        i = 0;
        result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i++;
        result += srcText[i];
        $("#target").text(result);

    }, 150); //the period between every character and next one, in milliseonds.
})();
```
http://jsfiddle.net/mattball/vsb9F/
- C'est un travail, mais comment? Comment est-il unscaped? Veuillez décrire....
- C'est ce que .text() n'.
- ou le trim est-ce que?
- Non... je l'ai déjà dit, c'est .text(), rien de plus. Lire de la doc, peut-être?
- Si simple! L' .texte() se contente d'afficher le texte .trim() supprime les espaces blancs autour du texte et css propriété white-space enveloppe le texte quand il y a un saut de ligne. WOW et j'avais pensé à l'aide de la propriété white-space mais sur #src, pas de #cible (GAH). Merci!
- Vous avez sauvé ma journée! Merci!!!!
- Une autre alternative est whitespace: pre-wrap, ce qui évite de longues lignes rendre la zone plus large
InformationsquelleAutor Matt Ball

Pour quiconque est à la recherche de ce que le titre de la question demande réellement (c'est comment j'en suis arrivé à cette page, "comment conserver les sauts de ligne lors de l'utilisation de jQuery text() la méthode"), vous pouvez utiliser quelque chose comme ceci:

(function($){
   $.fn.innerText = function(msg) {
         if (msg) {
            if (document.body.innerText) {
               for (var i in this) {
                  this[i].innerText = msg;
               }
            } else {
               for (var i in this) {
                  this[i].innerHTML.replace(/&amp;lt;br&amp;gt;/gi,"n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
               }
            }
            return this;
         } else {
            if (document.body.innerText) {
               return this[0].innerText;
            } else {
               return this[0].innerHTML.replace(/&amp;lt;br&amp;gt;/gi,"n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
            }
         }
   };
})(jQuery);

Maintenant appeler $('.quelques-classe").innerText() pour obtenir le texte avec des sauts de ligne préservés.

InformationsquelleAutor orcaman

0

Pourquoi ne pas utiliser .replace sur le srcText variable.
```
srcText = srcText.replace(/&lt;/g, "<"); //performs this with global modifier to cover whole string
```
De placer une série de .replace les appels à l'intérieur d'une fonction, à chaque appel modifié pour un autre personnage serait de nettoyer l'ensemble de la chaîne avant de l'imprimer à l'écran.
- Que dire de toutes les autres entités HTML, ou s'échappe comme ☃? Ce n'est pas une solution viable solution générale.
- d'accord, mais dans le champ d'application de cette question en particulier, il n'existe que trois types de caractères à remplacer.
- Ne ce même travail? jsfiddle.net/j9KF5/14
InformationsquelleAutor dsaa

Vous devez vous connecter pour publier un commentaire.