web-dev-qa-db-fra.com

angularjs newline filter sans autre code HTML

J'essaie de convertir les caractères de nouvelle ligne (\n) en html br.
Selon cette discussion dans le groupe Google , voici ce que j'ai:

myApp.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
});

La discussion conseille également d'utiliser les éléments suivants dans la vue:

{{ dataFromModel | newline | html }}

Cela semble utiliser l'ancien filtre html, alors que maintenant nous sommes supposés utiliser l'attribut ng-bind-html.

Quoi qu’il en soit, cela pose un problème: je ne souhaite pas que le code HTML de la chaîne d'origine (dataFromModel) soit rendu au format HTML; seulement les br 's.

Par exemple, étant donné la chaîne suivante:

Alors que 7> 5
Je ne veux toujours pas de HTML et d'autres choses ici ...

Je voudrais qu'il soit affiché:

While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

Est-il possible d'accomplir cela?

javascripthtmlangularjssanitization
85
MegaHit

Au lieu de jouer avec les nouvelles directives, j'ai décidé d'utiliser 2 filtres:

App.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
})
.filter('noHTML', function () {
    return function(text) {
        return text
                .replace(/&/g, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});

Puis, à mon avis, j'en ai un dans l'autre:

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>
33
MegaHit

Peut-être que vous pouvez y parvenir uniquement avec le langage HTML, une méthode <preformated text>? Cela évitera d'utiliser des filtres ou d'effectuer tout type de traitement.

Tout ce que vous avez à faire est d’afficher le texte dans un élément qui a cette CSS:

<p style="white-space: pre;">{{ MyMultiLineText}}</p>

Ceci analysera et affichera\n comme nouvelles lignes. Ça marche bien pour moi.

Ici, un exemple jsFiddle .

269
Devin Spikowski

Une méthode plus simple consiste à créer un filtre divisant le texte de chaque \n dans une liste, puis à utiliser `ng-repeat.

Le filtre:

App.filter('newlines', function() {
  return function(text) {
    return text.split(/\n/g);
  };
});

et dans le html:

<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>
26
JJW5432

Je ne sais pas si Angular a un service pour supprimer le code HTML, mais il semble que vous deviez supprimer le code HTML avant de transmettre votre filtre personnalisé newlines. Je le ferais par le biais d'une directive no-html personnalisée, à laquelle seraient transmises une propriété de portée et le nom d'un filtre à appliquer après la suppression de la variable html. 

<div no-html="data" post-filter="newlines"></div>

Voici la mise en œuvre

app.directive('noHtml', function($filter){
  return function(scope, element, attrs){
    var html = scope[attrs.noHtml];
    var text = angular.element("<div>").html(html).text();

    // post filter
    var filter = attrs.postFilter;
    var result = $filter(filter)(text);

    // apending html
    element.html(result);
  };
});

Le bit important est la variable text. Ici, je crée un élément DOM intermédiaire et l'ajoute au code HTML à l'aide de la méthode html, puis ne récupère que le texte avec la méthode text. Les deux méthodes sont fournies par Angular version allégée de jQuery .

La partie suivante applique le filtre newline, qui est effectué à l'aide du service $filter.

Vérifiez le lecteur ici: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

7
jaime

Si vous ne voulez pas détruire la mise en page avec des chaînes sans fin, utilisez la commande pre-line:

<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>
5
Sebastian Viereck

Une mise à jour du filtre avec ng-bind-html serait actuellement:

myApp.filter('newlines', function () {
  return function(text) {
    return text.replace(/(&#13;)?&#10;/g, '<br/>');
  }
});

et le filtre noHTML n'est plus requis.

la solution d’espace blanc a un support de navigateur faible: http://caniuse.com/#search=tab-size

2
Alex Mounir

Un peu tard pour la fête à ce sujet, mais je suggérerais une petite amélioration pour vérifier les chaînes non définies/null.

Quelque chose comme:

.filter('newlines', function () {
    return function(text) {
        return (text) ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})

Ou (un peu plus serré)

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})
0
Ben Edge