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