Add <br > tag after end of every line in jQueryJavaScript - Stack Overflow

admin 管理员组

文章数量: 1086019

I have a <textarea> field for user input. I want this - When user paste their text in that field and click some button it will automatic add a line break tag <br /> after the end of every line.
My html form look like this.

<div class="ment">
    <textarea class="form-control page_details" rows="5" id="text" placeholder="Detail here" name="details"></textarea>
    <button type="button">Generate</button>
</div>

I have a <textarea> field for user input. I want this - When user paste their text in that field and click some button it will automatic add a line break tag <br /> after the end of every line.
My html form look like this.

<div class="ment">
    <textarea class="form-control page_details" rows="5" id="text" placeholder="Detail here" name="details"></textarea>
    <button type="button">Generate</button>
</div>

and when user paste their text on textarea field like.

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam
erat volutpat.

When clicking the button it will look like this.

Lorem ipsum dolor sit amet, <br />
consectetuer adipiscing elit, <br />
sed diam nonummy nibh euismod tincidunt<br />
ut laoreet dolore magna aliquam<br />
erat volutpat.<br />

Help me out guys.

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 21, 2016 at 5:29 ketan 19.4k4242 gold badges6868 silver badges105105 bronze badges asked Mar 21, 2016 at 5:24 Opu Hossain HawladerOpu Hossain Hawlader 2711 silver badge44 bronze badges 5

• does your input have carriage return when you have copy pasted it in text-area? Or do you want generate button to pute line size and insert break-line automatically? – gurvinder372 Commented Mar 21, 2016 at 6:02
• any method will do. clicking generate is easy to understand for me. – Opu Hossain Hawlader Commented Mar 21, 2016 at 6:11
• Read my question again. Most of the answers below are assuming (because of your ambigious input) that input already has line feed (\n) character in it. Is your input a single line which you want to break into multiple based on the width of textarea or does it already have required line feed characters? – gurvinder372 Commented Mar 21, 2016 at 6:15
• User will copy and paste content from website. So that input already has line feed (\n) character in it. Yes it is. and i wanted to convert it as html line break tag <br>. Thanks again. It solved. some one solved in code snipped. – Opu Hossain Hawlader Commented Mar 21, 2016 at 6:32
• <?=nl2br($content)?> is the easiest. – Gogol Commented Mar 21, 2016 at 22:16

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You could use String.protototype.split() with RegExp /\n|\s\n/ , Array.prototype.join() with parameter "<br>\n" , concatenate "<br>" to end of replacement textarea value

function addBreak(el) {
  var textarea = el;
  var matches = textarea.value.split(/\n|\s\n/);
  textarea.value = matches.join("<br>\n") + "<br>";
}

<div class="ment">
  <textarea class="form-control page_details" rows="5" id="text" placeholder="Detail here" name="details"></textarea>
  <button type="button" onclick="addBreak(this.previousElementSibling)">Generate</button>
</div>

Use on paste event.

$("button").on("click",function(){
  $("#text").bind("paste", function(e){
    $('#txtarea').append('<BR>').focus();
  });
});

<div class="ment">
    <textarea class="form-control page_details" rows="5" id="text" placeholder="Detail here" name="details"></textarea>
    <button type="button">Generate</button>
</div>

Replace the new line characters with <br/>

var pastedText = $("#text").val();
pastedText = pastedText.replace(/(\r\n|\n|\r)/gm, "<br>");

I'd cover my bets by handling \r\n (the sequence), and then handling \rand \n through a character class, like this:

text = text.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');

The first replace turns the sequence \r\n into <br />. The second replace replaces any \r or \n characters found on their own with the string.

More on regular expressions in JavaScript here.

本文标签： Add ltbr gt tag after end of every line in jQueryJavaScriptStack Overflow