web-dev-qa-db-fra.com

angularjs pour afficher du texte brut au lieu de HTML

J'ai un texte comme ça:

<span>My text</span>

Je veux afficher sans tags:

My text

Je ne veux pas non plus appliquer les balises, je veux les décaper. Quel est un moyen facile de faire cela?

Angulaire html:

<div>{{myText | htmlToPlaintext}}</div>
javascripthtmlangularjs
64
Harry

jQuery est environ 40 fois plus lent , veuillez ne pas utiliser jQuery pour cette tâche simple.

function htmlToPlaintext(text) {
  return text ? String(text).replace(/<[^>]+>/gm, '') : '';
}

utilisation:

var plain_text = htmlToPlaintext( your_html );

Avec angular.js:

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
);

utilisation :

<div>{{myText | htmlToPlaintext}}</div>
205
Utopik

à partir de https://docs.angularjs.org/api/ng/function/angular.element

angular.element

encapsule un élément DOM brut ou une chaîne HTML en tant qu'élément jQuery (si jQuery n'est pas disponible, angular.element délègue au sous-ensemble intégré de jQuery d'Angular, appelé "jQuery lite" ou "jqLite.")

Pour que vous puissiez simplement faire:

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return angular.element(text).text();
    }
  }
);

Usage:

<div>{{myText | htmlToPlaintext}}</div>
21
Davy R
var app = angular.module('myapp', []);

app.filter('htmlToPlaintext', function()
{
    return function(text)
    {
        return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
});

<p>{{DetailblogList.description | htmlToPlaintext}}</p>
4
Khyati Acharya

Vous souhaitez utiliser la bande HTML intégrée du navigateur pour cela au lieu de vous appliquer vous-même une expression rationnelle. Il est plus sécurisé car le navigateur toujours écologique fait le travail pour vous.

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return stripHtml(text);
    };
  }
);

var stripHtml = (function () {
  var tmpEl = $document[0].createElement("DIV");
  function strip(html) {
    if (!html) {
      return "";
    }
    tmpEl.innerHTML = html;
    return tmpEl.textContent || tmpEl.innerText || "";
  }
  return strip;
}());

La raison de l'envelopper dans une fonction à exécution automatique est pour réutiliser la création d'élément.

3
Olivier C

<div ng-bind-html="myText"></div> Pas besoin de mettre dans les balises d'interpolation HTML {{}} comme vous l'avez fait {{myText}}.

et n'oubliez pas d'utiliser ngSanitize dans le module, par exemple. var app = angular.module("myApp", ['ngSanitize']);

et ajouter sa dépendance cdn dans la page index.html https://cdnjs.com/libraries/angular-sanitize

3
Prasanna Sasne

Vous pouvez utiliser ng-bind-html, n'oubliez pas d'injecter le service $ sanitize dans votre module.

0
Hung Vu