在html中的两个单词之间插入空格

Question

我想在两个单词之间插入一些空格，我不想使用pre标签。在我的代码中，这里有一个输入字段，用户可以输入文本，一些javascript代码显示在div中，您可以在下面查看代码。

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

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

Javascript代码

    $(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);
});

我使用 在两个单词之间插入空格，但这不起作用。如果我想插入十个空格，那么它只插入一个空格。 该代码无效，因为我希望您无法使用此代码插入多个空格。

更新
我想要这样。

Answer 1

您可以在文本中插入多个 ，它会正确显示。简单的白色空格被截断为单个。

＆＃13;

＆＃13;

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

＆＃13;

<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>.

＆＃13;

＆＃13;

＆＃13;

保留用户输入的空格：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你真的想插入10个空格，那么你必须放10次。

clientText += '          ';

您可以详细了解与空格here相关的HTML实体。

Answer 3

你可以使用replace（）只需将所有等效空格替换为

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

DEMO

Answer 4

我创建了一个简单的convertSpace函数来处理将空格转换为nbsp。 https://jsfiddle.net/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);
});