I wan to insert some spaces in between two words and I do not want to use pre tags. In my code here is one input field where user can enter text and some javascript code display it in div you can check the code right below.

<input type="text" id="user-input" />

<div id="user-text"></div>

Javascript code

    $(document).on('keyup', '#user-input', function(event){
var userText = $('#user-text');
var clientText = $(this).val().toUpperCase();
if(event.keyCode === 32 || event.which === 32){ clientText += ' ';  }
    clientText = $('<textarea />').html(clientText).text();

    userText.text(clientText);
});

I'm using   for inserting space between two words but this is not working. It only insert one space if I want to insert ten space then what. The code is not working like as I'm expecting you can't able to insert more than one space using this code.

UPDATE
I want like this.

I wan to insert some spaces in between two words and I do not want to use pre tags. In my code here is one input field where user can enter text and some javascript code display it in div you can check the code right below.

<input type="text" id="user-input" />

<div id="user-text"></div>

Javascript code

    $(document).on('keyup', '#user-input', function(event){
var userText = $('#user-text');
var clientText = $(this).val().toUpperCase();
if(event.keyCode === 32 || event.which === 32){ clientText += ' ';  }
    clientText = $('<textarea />').html(clientText).text();

    userText.text(clientText);
});

I'm using   for inserting space between two words but this is not working. It only insert one space if I want to insert ten space then what. The code is not working like as I'm expecting you can't able to insert more than one space using this code.

UPDATE
I want like this.

• javascript
• html

4 Answers 4

You can insert more than one   to text and it will be displayed correctly. Simple white-spaces are truncated to single.

$(document).ready(function () {
  $('input').on('input change', function () {
    $('#span1').html(
      $(this).val() + ' '.repeat($(this).val().length)
    );
    $('#span2').html(
      $(this).val() + ' '.repeat($(this).val().length)
    );
  });
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Some text"/><br/>
<span id='span1'>Some text</span>Other text to pad with <b>&amp;nbsp;</b>.<br/>
<span id='span2'>Some text</span>Other text to pad with <b>white-space</b>.

To preserve user entered white spaces:

$(document).ready(function() {
  $('input').on('input change', function() {
    $('span').html(
        $(this).val().toUpperCase().replace(/\s/g, ' ')
    );
  })
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
<br/>
<span></span>

If you really want to insert say 10 spaces, then you have to put &nbsp 10 times.

clientText += '          ';

You can learn more about HTML entities related to spaces here.

I have created a simple convertSpace function to take care of converting blank spaces to nbsp. https://jsfiddle/elemilion/6own3g7z/

function convertSpacesToNbsp(str){
return str.split('').map(function(char){
if(char === ' '){
    char = ' ';
}
return char;
}).join('');
}
$(document).on('keyup', '#user-input', function(event){
var userText = $('#user-text');
var inputStr = $(this).val().toUpperCase();
var clientText = convertSpacesToNbsp(inputStr);
userText.html(clientText);
});

you can use replace() just replace all the \s equivalent space to nbsp;

var userText = $('#user-text');
$(document).on('input', '#user-input', function(event){
    userText.html( $(this).val().replace(/\s/g,' ') );
});

DEMO