Insert blank space between two words in html

Question

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 += '&nbsp;';  }
    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.

Justinas · Accepted Answer · 2016-09-29T07:56:00.003

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() + '&nbsp;'.repeat($(this).val().length)
    );
    $('#span2').html(
      $(this).val() + ' '.repeat($(this).val().length)
    );
  });
})

<script src="https://ajax.googleapis.com/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, '&nbsp;')
    );
  })
})

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

Please see the update. Your code is not generating same result — Azeem Haider, Sep 29 '16 at 07:39
@AzeemHaider You want to preserve user entered white spaces? If so, check edit — Justinas, Sep 29 '16 at 07:53

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

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

clientText += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';

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

edited May 23 '17 at 12:09

Community

1
1

answered Sep 29 '16 at 07:21

Rax Weber

3,730
19
30

Beginner · Answer 3 · 2016-09-29T08:07:51.017

0

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,'&nbsp;') );
});

DEMO

edited Sep 29 '16 at 08:07

answered Sep 29 '16 at 07:51

Beginner

4,118
3
17
26

score 0 · Answer 4 · answered Sep 29 '16 at 08:00

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

function convertSpacesToNbsp(str){
return str.split('').map(function(char){
if(char === ' '){
    char = '&nbsp;';
}
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);
});

Insert blank space between two words in html

4 Answers4