nl2br() equivalent in javascript [duplicate]
Asked Answered
U

2

88

Possible Duplicate:
jQuery convert line breaks to br (nl2br equivalent)

Currently I add <BR> for each evt.which == 13. Is there a nl2br() for JavaScript, so I can do away with this evt.which == 13?

How different is this from php.js

$('#TextArea').keypress(function(evt) {

    if (evt.which == 13) {

        var range           = $('#TextArea').getSelection();
        var image_selection = range.text;

        $('#TextArea').replaceSelection('<BR>');
        $('#TextArea1').html($('#TextArea').val());
    }
});
Unexacting answered 19/9, 2011 at 7:50 Comment(3)
white-space: pre-line;Waddle
white-spac:pre-line; only helps to render. If you export the same value to rtf later on, it gets dropped.Bromo
This question could be missleading as it mixes two different problems: nl2br and evt.which == 13. Really keypress and evt.which == 13 (wich is the event code for Enter Key) have nothing to do with converting new lines to HTML's <br> tag.Bocage
M
139

Take a look at nl2br on php.js which seems exactly what you're looking for. Basically, it's:

function nl2br (str, is_xhtml) {
    if (typeof str === 'undefined' || str === null) {
        return '';
    }
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

EDIT:
your example using nl2br() may be changed like this:

$('#TextArea').keypress(function(evt){
        $('#TextArea1').html(nl2br($('#TextArea').val()));
    });

(note that this updates #TextArea1 on every keypress and doesn't change the value of #TextArea wich is what I think you're looking for, but I might be misunderstanding)

EDIT2:
If you want to get the behaviour of your old function (with inserting <br/>s to #TextArea) do this:

$('#TextArea').keypress(function(evt){
        $('#TextArea').html(nl2br($('#TextArea').val())); // replace linebreaks first
        $('#TextArea1').html($('#TextArea').val()); // copy to #TextArea1
    });
Midinette answered 19/9, 2011 at 7:53 Comment(8)
Does it work on keypress/keup/keydown?Unexacting
depends on how you use it - it may be useful if you show more of your code so i could give a hint on how to integrate this.Midinette
I do this by keypress/keup/keydown, It think this is what it does, now can I echo this as nlb2r()?Unexacting
Can you look back into the question in a minute, updating it with keypressUnexacting
already done, take a look at my edit on how i would change your code.Midinette
So this does not show <BR> in the textarea?Unexacting
It has to add a <br> into textarea, but thats okay. I was looking for one without the <br> though. Something that is achievable with the PHP nl2br(). Do not want the users to see the <BR> in textareaUnexacting
We could also use split/join instead of preg_replace. str = str.split(/\r\n|\n\r|\r|\n/).join('<br>');Massimo
P
27

Here is a function nl2br in php.js.

function nl2br (str, is_xhtml) {
  // http://kevin.vanzonneveld.net
  // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Philip Peterson
  // +   improved by: Onno Marsman
  // +   improved by: Atli Þór
  // +   bugfixed by: Onno Marsman
  // +      input by: Brett Zamir (http://brett-zamir.me)
  // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Brett Zamir (http://brett-zamir.me)
  // +   improved by: Maximusya
  // *     example 1: nl2br('Kevin\nvan\nZonneveld');
  // *     returns 1: 'Kevin<br />\nvan<br />\nZonneveld'
  // *     example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
  // *     returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
  // *     example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
  // *     returns 3: '<br />\nOne<br />\nTwo<br />\n<br />\nThree<br />\n'
  var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br ' + '/>' : '<br>'; // Adjust comment to avoid issue on phpjs.org display

  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
Perceive answered 19/9, 2011 at 7:53 Comment(3)
Does it work on keypress/keup/keydown?Unexacting
It has nothing to do with the keyperss. You can use it in your keypress event callback function.Perceive
The link is broken. See archived version at web.archive.org/web/20160301093230/http://phpjs.org/functions/…Encrust

© 2022 - 2024 — McMap. All rights reserved.