在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); 
}); 

我使用 为两个词之间插入的空间，但是这是行不通的。它只插入一个空格，如果我想插入十个空格，那么什么。 代码不工作，因为我期待你无法使用此代码插入多个空格。

UPDATE
我想要这样。

Answer 1

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

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

---

为了保护用户输入空格：

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

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

Answer 2

如果你真的想插入说10位，那么你必须把& NBSP 10倍。

clientText += '          '; 

您可以了解更多有关与空间here相关的HTML实体的信息。

Answer 3

你可以使用替换（）只需更换所有\ s等效空间到nbsp ;

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