web-dev-qa-db-ja.com

他のHTMLのないanglejs改行フィルター

改行文字（\n）をhtml brに変換しようとしています。
Googleグループでのこの議論 に従って、ここに私が持っているものがあります：

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

そこの議論はまた、ビューで次を使用することをお勧めします。

{{ dataFromModel | newline | html }}

これは古いhtmlフィルターを使用しているようですが、今はng-bind-html属性を使用することになっています。

とにかく、これは問題を引き起こします。元の文字列（dataFromModel）のHTMLをHTMLとしてレンダリングしたくないのです。 brのみ。

たとえば、次の文字列を指定します。

7> 5の間
まだここにhtmlやものを入れたくないのですが...

出力したい：

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

これを達成する方法はありますか？

javascripthtmlangularjssanitization
85
MegaHit

新しいディレクティブをいじる代わりに、2つのフィルターを使用することにしました。

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

次に、私の見解では、一方をもう一方にパイプします：

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

おそらく<preformated text>方法でhtmlでのみこれを達成できますか？フィルターの使用を避けたり、あらゆる種類の処理を行います。

あなたがしなければならないのは、このCSSを持つ要素内のテキストを表示することです：

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

これにより、\ nが解析され、新しい行として表示されます。私には最適です。

ここでは、 jsFiddleの例 です。

275
Devin Spikowski

これを行う簡単な方法は、各\nのテキストをリストに分割するフィルターを作成し、 `ng-repeatを使用することです。

フィルター：

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

そして、HTMLで：

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

無限の文字列でレイアウトを破棄したくない場合は、事前入力を使用します。

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

Angularにhtmlを削除するサービスがあるかどうかはわかりませんが、newlinesカスタムフィルターを渡す前にhtmlを削除する必要があるようです。私が行う方法は、カスタムno-htmlディレクティブを使用することです。このディレクティブには、htmlを削除した後に適用するスコーププロパティとフィルターの名前が渡されます。

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

実装は次のとおりです

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

重要なビットはtext変数です。ここでは、中間DOM要素を作成し、htmlメソッドを使用してHTMLを追加し、textメソッドでテキストのみを取得します。両方のメソッドは AngularのjQueryのライトバージョン で提供されます。

次の部分は、$filterサービスを使用して行われるnewlineフィルターの適用です。

ここでプランカーを確認してください： http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

6
jaime

現在、ng-bind-htmlを使用したフィルターの更新は次のようになります。

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

noHTMLフィルターは不要になりました。

ホワイトスペースソリューションのブラウザサポートが少ない： http://caniuse.com/#search=tab-size

2
Alex Mounir

これについては少し遅れましたが、未定義/ヌル文字列をチェックするための小さな改善をお勧めします。

何かのようなもの：

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

または（少し厳しく）

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