CODEWITHSUNDEEP
phpjqueryhtml
kunz
kunz

Reputation: 1047

Insert a line break automatically after 33 characters

I want to insert a line break after every 33 characters typed.

index.php 

<textbox id="txt"></textbox>
<div id="typing_view"></div>

typeing.js

$(document).ready(function () {
    $('#txt').keyup(function(){
      $('#typing_view').html($(this).val());
    });
  });

so what the js file does is it displayes what ever i am typing but i want it to insert a line break after every 33 charaters

Output

enter image description here

Upvotes: 1

Views: 56

Answers (1)

Tushar
Tushar

Reputation: 87203

Use regex

$('#typing_view').html($(this).val().replace(/([\s\S]{33})/g, '$1<br />'));

Regex Explanation:

([\s\S]{33})/g: () is capturing group, the matches will be captured and can be accessed by using $n. [\s\S] matches anything. {33} is used to match exactly 33 characters of the previous match. g is global flag, without it only the first match will be matched.

$1 refers to the first captured group i.e. 33 characters.

$(document).ready(function() {
  $('#txt').keyup(function() {
    $('#typing_view').html($(this).val().replace(/([\s\S]{33})/g, '$1<br />'));

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="txt"></textarea>
<div id="typing_view"></div>

Upvotes: 2

Related Questions