Skip to content

Instantly share code, notes, and snippets.

@kensnyder
Forked from naoyeye/angular.filters.nl2br.js
Last active February 26, 2016 12:59
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save kensnyder/49136af39457445e5982 to your computer and use it in GitHub Desktop.
Save kensnyder/49136af39457445e5982 to your computer and use it in GitHub Desktop.
/*
# Usage in html template:
"xxx | nl2br"
<div ng-bind-html=" YourString | nl2br "></div>
or:
"xxx | nl2br:Boolean"
Boolean( true or flase or just keep null) means is xhtml or not
if is xhtml, replace with <br/> ; if not , replace with <br>
<div ng-bind-html=" YourString | nl2br:true "></div>
-------------------------
# Example:
//==Analog data===
$scope.items = [
{"message": "test"},
{"message": "New\nLine"},
]
//=====
<div class="comment" ng-repeat="item in items">
<p ng-bind-html=" item.message | nl2br "></p>
<!-- or with linky -->
<p ng-bind-html=" item.message | linky | nl2br "></p>
</div>
-------------------------
# Output result:
<div class="comment ng-scope" ng-repeat="item in items">
<p class="ng-binding" ng-bind-html=" item.message | nl2br ">
test
</p>
</div>
<div class="comment ng-scope" ng-repeat="item in items">
<p class="ng-binding" ng-bind-html=" item.message | nl2br ">
New<br>Line
</p>
</div>
*/
angular.module('myModule')
.filter('nl2br', ['$sanitize', function($sanitize) {
var tag = (/xhtml/i).test(document.doctype) ? '<br />' : '<br>';
return function(msg) {
// ngSanitize's linky filter changes \r and \n to &#10; and &#13; respectively
msg = (msg + '').replace(/(\r\n|\n\r|\r|\n|&#10;&#13;|&#13;&#10;|&#10;|&#13;)/g, tag + '$1');
return $sanitize(msg);
};
}]);
@vpArth
Copy link

vpArth commented Jun 21, 2015

You forget about boolean is_xhtml variable in your comments ;)
What wrong with using <br /> everywhere?

@habovh
Copy link

habovh commented Aug 6, 2015

I was wondering the same thing as @vpArth...
So I looked up on W3schools:

Differences Between HTML and XHTML

In HTML, the <br> tag has no end tag.
In XHTML, the <br> tag must be properly closed, like this: <br />.

But HTML will handle the self-closing tag <br /> as well, so for compatibility issues, just don't bother trying to find out in which doctype we are, just use <br /> ;-)

Source (Stack Overflow): HTML 5: Is it <br>, <br/>, or <br />?

TL;DR

Always use <br />.
See my fork here (Bonus: CoffeeScript version)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment