CODEWITHSUNDEEP
javascriptjqueryregex
eugeneK
eugeneK

Reputation: 11116

How to replace \n with <br /> in JavaScript?

I have a textarea where I insert \n when user presses enter. Code from this textarea is sent to a WCF service via jQuery.ajax(). I cannot save \n in DB as it won't show in other applications consuming the service.

How can i replace \n with <br /> tag?

solution

Well many of you tried and some got right with Javascript Regex with /g (global modifier). At the end i had \n inserted twice, i don't know why, my only guess is that jQuery on keypress event created double \n which i debug.

$('#input').keypress(function (event) {
    if (event.which == '13') {
        inputText = $('#input').val() + '\n';
        $('#input').val(inputText);
    }
});

Upvotes: 24

Views: 61467

Answers (11)

fred
fred

Reputation: 1303

I know this is an ancient question/answer but it's one of the first to come up on a google search and no longer works here in the distant future with current browsers.

The correct answer to convert the \n to <br /> (at least for me) is:

text = text.Replace(/\\n/g,"<br />");

Upvotes: 0

parliament
parliament

Reputation: 22914

The following will replace all instances of \n with a <br /> :

while (message.indexOf("\\n") !== -1) {
   message = message.replace("\\n", "<br />");
}

Upvotes: 1

Teneff
Teneff

Reputation: 32158

it could be done like this:

$('textarea').val().replace(/\n/g, "<br />");

edit: sorry ... the regular expressions in javascript should not be quoted

working example

Upvotes: 12

rzetterberg
rzetterberg

Reputation: 10268

Like said in comments and other answer, it's better to do it on server side.

However if you want to know how to do it on clientside this is one easy fix: 

textareaContent.replace(/\\n/g, "<br />");

Where textareaContent is the variable with the data in the textarea.

Edit: Changed so that it replaces globally and not only first match.

Upvotes: 7

Tomas Reimers
Tomas Reimers

Reputation: 3292

Building on the other answers, this is probably done best by php. Now assuming you don't want to ajax this (which would be pointless and cause unnecessary server load), you should probably use phpjs.org's javascript port of this function:

function nl2br (str, is_xhtml) {
    // Converts newlines to HTML line breaks  
    // 
    // version: 1103.1210
    // discuss at: http://phpjs.org/functions/nl2br    // +   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\nvan\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: '\nOne\nTwo\n\nThree\n'    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '' : '<br>';

    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

http://phpjs.org/functions/nl2br:480

Upvotes: 1

Senad Meškin
Senad Meškin

Reputation: 13756

you can use javascript built in replace function with a little help of regex, for example

$('#input').val().replace(/\n\r?/g, '<br />')

this code will return all enters replaced with <br>

Upvotes: 2

Qtax
Qtax

Reputation: 33908

var replaced = $('#input').val().replace("\n", "<br/>");

Upvotes: 1

BrunoLM
BrunoLM

Reputation: 100331

Replace with global scope

$('#input').val().replace(/\n/g, "<br />")

or

$('#input').val().replace("\n", "<br />", "g")

Upvotes: 40

Richard Friend
Richard Friend

Reputation: 16018

From within your WCF service can you not just use String.Replace ?

text = text.Replace("\n","<br />");

Upvotes: 1

Wicked Coder
Wicked Coder

Reputation: 1118

You can use a simple javascript string function.

 string.replace("\n", "<br>")

Upvotes: 2

Allman
Allman

Reputation: 41

If you support PHP you should check this out: http://php.net/manual/en/function.nl2br.php

Upvotes: 2

Related Questions