angularjs для виведення простого тексту замість html

У мене є такі тексти:

My text

Я хочу показати без тегів:

My text

Я також не хочу застосовувати теги, я хочу їх позбавити. Який простий спосіб це зробити?

Кутовий html:

<div>{{myText | htmlToPlaintext}}</div>
59
Я бачу, що і його рішення використовує jQuery - Ви позначили цей пункт під AngularJS, і у мене є відчуття, що ви можете зробити це в AngularJS без використання jQuery, якщо тільки ви можете дати більше інформації у вашому питанні - зокрема, де ви хочете показати текст у перегляді ...
додано Автор callmekatootie, джерело
Ви позначили цей пункт під AngularJS, тому я припускаю, що ви хочете відобразити текст за допомогою AngularJS. Якщо так, чи є цей текст у моделі? Який html-тег використовується для відображення вмісту моделі?
додано Автор callmekatootie, джерело
@callmekatootie Я створив фільтр на основі відповіді, яке дав Абхішек.
додано Автор Harry, джерело
@callmekatootie Я додав приклад того, що я роблю в кутовому
додано Автор Harry, джерело

8 Відповіді

jQuery - це приблизно 40 разів SLOWER .

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

використання:

var plain_text = htmlToPlaintext( your_html );

З angular.js:

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

використання:

<div>{{myText | htmlToPlaintext}}</div>  
200
додано
Це не працює, якщо текст HTML є наступним. "

Текст .


"
додано Автор Samarth Agarwal, джерело
Коли я спробував, він зберігав тег span .
додано Автор Samarth Agarwal, джерело
Як показати попередній перегляд, замість того, щоб показувати звичайний текст (він працює). але мені потрібно, щоб показати попередній перегляд, як переповнення стека показує при публікації питання або відповіді, включаючи зображення також
додано Автор codelearner, джерело
Я ніколи б не додав залежність jQuery тільки для перетворення html в текст, але якщо б мій проект вже використовував jQuery, я б вибрав рішення jQuery, тому що я вважаю, що звичайний виписаний звичайний вираз менш читається, менш перевірений і менш надійний. Чи захищає ваш регулярний вираз усі можливі форми XSS ?
додано Автор Blaise, джерело
jQuery в 40 разів повільніше, але ви все ще отримуєте 8000 операцій/с, тому не використовуючи jQuery з цієї причини, це передчасна оптимізація.
додано Автор Blaise, джерело
Ви можете скоротити регулярний вираз за допомогою нетривалого пошуку /<.+?>/gm, , який виглядає трохи більш інтуїтивно, читабельним, а також заощаджує кілька символів.
додано Автор kernel, джерело
це не працює з символом HTML, який видалився?
додано Автор boh, джерело
@Blaise, якщо ви додаєте текст до DOM з jQuery, вам не доведеться захищати від XSS в цю функцію. jQuery робить це після додавання до DOM. До речі, я дійсно не впевнений, який з них більш читабельний.
додано Автор Utopik, джерело
@ brettof86 Я оновив, простіше читати. Дякую.
додано Автор Utopik, джерело
@Blaise ви маєте рацію, 8k ops/s достатньо. Але подумайте про всю картину. Чи виконує ваша програма тільки це? А як щодо мобільних телефонів? А як щодо важких додатків? Чи існує проблема із сумісністю з веб-переглядачем? Які переваги jQuery? Чи є jQuery більш читабельним? Чи легко jQuery писати? Іноді jQuery досить добре. Але jQuery не слід використовувати скрізь. Особливо не тут.
додано Автор Utopik, джерело
@SamarthAgarwal, що не так? вона повертає Some Text. , як я і очікував
додано Автор Utopik, джерело
Насправді я віддаю перевагу String (text) .replace (/ <[^>] +>/gm, ''). Я використовую його протягом багатьох років без будь-яких проблем.
додано Автор blockloop, джерело
Можливо, ви повинні додати нуль-перевірку там, або він виведе "null": повернути текст? Рядок (текст) .replace (/ <[^>] +>/gm, ''): "";
додано Автор Björn, джерело
Я насторожено ставлюся до цього рішення. Існує ряд обставин, де воно не відбудеться: 1. Менше, ніж знак '<', що з'являється в тексті, який не є тегом, тобто

Один <�Два

. Рядок "
додано Автор GuyGizmo, джерело
за допомогою механізму DOM охоплює набагато більше випадків, що цей простий замінник замість тих, які не є прикладом: деякі коди тут ""
додано Автор Bogdan, джерело

from https://docs.angularjs.org/api/ng/function/angular.element

< консультування.елемент

     

обгортає сирий елемент DOM або рядок HTML як елемент jQuery (якщо jQuery   не доступний, кутовий.елемент делегує вбудований Angular   підмножина jQuery, що називається "jQuery lite" або "jqLite.")

Так що ви просто можете зробити:

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

Використання:

<div>{{myText | htmlToPlaintext}}</div>
20
додано
Як показати попередній перегляд, замість того, щоб показувати звичайний текст (він працює). але мені потрібно, щоб показати попередній перегляд, як переповнення стека показує при публікації питання або відповіді, включаючи зображення також
додано Автор codelearner, джерело
Я б також уникав такого підходу; Можливо, це не так довго, як повна jQuery, але, звичайно, набагато повільніше, ніж прийнята відповідь.
додано Автор jake, джерело
Це не вдасться, якщо text ще не загорнуто в якийсь тег HTML. Отже, щоб бути надійним, він має бути схожим на: return angular.element ('<div>' + text + '</div>')
додано Автор Episodex, джерело
якщо ви знаходитесь в функції посилання директиви, ви можете просто зробити element.text() 0.o
додано Автор Jordan, джерело
Якщо ваш html має вбудований стиль, то прийнята відповідь не вдасться, таким чином працює нормально :)
додано Автор kaxi1993, джерело
Я пропоную упакувати ваш текст у елемент, інакше звичайний старий рядок, наприклад "hi", поверне порожній рядок angular.element ('<div>' + text + '</div>') .text ();
додано Автор Chris Jacob, джерело
Престижність до цього, використання regex є швидким, але там будуть крайні випадки, коли це не вдається. Це є більш простим і безпечним способом, коли продуктивність не є критичною. Дякую!
додано Автор Bruce, джерело
Я віддаю перевагу такому рішенню використання регулярного виразу, принаймні у випадках, коли швидкість не є критичною. Це більш правильно і фактично перетворить html на звичайний текст, що не набагато менше знаків, спеціальних об'єктів та всіх.
додано Автор GuyGizmo, джерело

Використовуйте цю функцію як

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

  "My text".text()
  output:
  My text

скрипка

7
додано
@Utopik чому? Також ви можете написати це як відповідь?
додано Автор Harry, джерело
Це рішення на основі jQuery. Питання йшло про angularjs.
додано Автор RevNoah, джерело
Чому люди дали негативні 2?
додано Автор pixelbyaj, джерело
Rev Знак відповіді є javascript, і якщо я зробив це, використовуючи jquery, що робить його різницею
додано Автор pixelbyaj, джерело
+1, і я не бачу тут жодного jQuery ... wtf? Інша проблема полягає в тому, що метод @ Abjo розширює вбудований прототип String. Про те, що деякі розробники вирішили злитися.
додано Автор Marecky, джерело
Ваше рішення не сумісне з вимогами ОП. він вже побудував свою програму на angularjs. jQuery - це інша основа.
додано Автор Ibrahim Lawal, джерело

<div ng-bind-html="myText"></div> No need to put into html {{}} interpolation tags like you did {{myText}}.

and don't forget to use ngSanitize in module like e.g. var app = angular.module("myApp", ['ngSanitize']);

and add its cdn dependency in index.html page https://cdnjs.com/libraries/angular-sanitize

3
додано
робота як шарм завдяки простої та короткої відповіді.
додано Автор Gaurav_0093, джерело

Для цього потрібно використовувати вбудовану HTML-смужку браузера замість того, щоб застосовувати власний регулярний вираз. Це є більш безпечним, оскільки коли-небудь зелений браузер робить роботу за вас.

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;
}());

Причина її перенесення в функцію самовиконання полягає в повторному використанні створення елемента.

3
додано
Як показати попередній перегляд, замість того, щоб показувати звичайний текст (він працює). але мені потрібно, щоб показати попередній перегляд, як переповнення стека показує при публікації питання або відповіді, включаючи зображення також
додано Автор codelearner, джерело
додано Автор rinogo, джерело
змінив $ документ [0] на документ і він працював для мене! Дякую
додано Автор Allen Hamilton, джерело
var app = angular.module('myapp', []);

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


{{DetailblogList.description | htmlToPlaintext}}

2
додано
Як показати попередній перегляд, замість того, щоб показувати звичайний текст (він працює). але мені потрібно, щоб показати попередній перегляд, як переповнення стека показує при публікації питання або відповіді, включаючи зображення також
додано Автор codelearner, джерело
Будь ласка, додайте пояснення. Ваша відповідь наразі позначена як "низька якість" і згодом може бути видалена.
додано Автор Johannes Jander, джерело
додайте деякі формулювання деяких кодів, що допомагає генерувати кращі відповіді.
додано Автор winner_joiner, джерело
Існує різниця між низькою якістю відповіді, яку потрібно відхилити, і відсутністю відповіді, яку слід видалити. Перегляньте Ви робите це неправильно: прохання про розсудливість в черзі публікацій низького якості .
додано Автор DS9, джерело

Використовуйте ng-bind-html це тільки правильний і найпростіший спосіб

2
додано
Ласкаво просимо до переповнення стека. Будь ласка, додайте більше подробиць для роз'яснення. Як тільки у вас вистачить репутації , ви зможете коментувати будь-яку публікацію; замість цього надайте відповіді, які не потребують роз'яснення з ОП .
додано Автор mmushtaq, джерело

Ви можете скористатися ng-bind-html, не забудьте вбудувати службу $ sanitize у ваш модуль Сподіваюся, що це допоможе

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram