跨度复制输入文本弄乱其他连续空格

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>