跨度複製輸入文本弄亂其他連續空格

Question

我回來了，我的顯然雄心勃勃的項目。

因此，我想將我的輸入文本複製到一個範圍並隱藏原始文本。

$('#street_1').on("input" ,function() { 
       document.getElementById('street1span').innerHTML = document.getElementById('street_1').value.substring(0, 10) + '<span style="color: red;">' + document.getElementById('street_1').value.substring(10) + '</span>'; 

Fiddle

我現在遇到的問題是，如果你把一個以上的空格連續，它們不受跨度註冊：

（一個空白工作得很好）

我正在尋找一種方法，可能會將空格註冊爲字符。

Answer 1

試試這個。 .value.substring(0, 10).replace(/ /g, ' ')是你需要的。它將多個空格轉換爲 這是用於空白的html。

$('#street_1').on('input' ,function() { 
    document.getElementById('street1span').innerHTML = document.getElementById('street_1').value.substring(0, 10).replace(/ /g, '&nbsp;') + '<span style="color: red;">' + document.getElementById('street_1').value.substring(10).replace(/ /g, '&nbsp;') + '</span>'; 

    }); 

Fiddle

Answer 2

這是因爲多個空格不能被識別，除非指定爲nbsp ;.你需要一個功能來做到這一點。

function escapeSpaces (str) { 
    return str.replace(/^ +/mg, function (match) { 
     return match.replace(/ /g, " "); 
    }); 
} 

使用這樣escapeSpaces（的document.getElementById（ 'street_1'）。value.substring（0，10）），而連接字符串。

裁判 - Convert Multiple Spaces to   At Beginning of Line with Javascript

Answer 3

您可以使用String.prototype.replace()只有一個空間str.replace(/\s+/g, ' ')

還注意到自己的代碼示例已經重構爲只使用jQuery來替換所有重複空格。

代碼：

$('#street_1').on('input' ,function() { 
 
    var $this = $(this), 
 
     html = ''; 
 
    
 
    $this.val($this.val().replace(/\s+/g, ' ')); 
 
    
 
    html = $this.val().substring(0, 10) + 
 
    '<span style="color: red;">' + 
 
     $this.val().substring(10) + 
 
    '</span>'; 
 
    
 
    $('#street1span').html(html); 
 
});

#div {position: relative;}#street_1 {font-family: "Times New Roman";caret-color: black; z-index: 1;font-size: 1em;}#street1span {display: inline-block;font-size: 1em;font-family: "Times New Roman";white-space: nowrap;overflow: hidden;width: 98%;position: absolute;top: 2px;left: 1px;padding: 1px;z-index: 2;pointer-events: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div"> 
 
    <input id="street_1"/> 
 
    <span id="street1span"></span> 
 
</div>