跨度复制输入文本会混淆其他连续的空格

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

您可以使用String.prototype.replace()将所有重复的空格替换为仅有一个空格str.replace(/\s+/g, ' ')

另请注意，您的代码示例已经过重构，只能使用jQuery。

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是因为除非指定为nbsp;否则无法识别多个空格。你需要一个功能来做到这一点。

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

在连接字符串时使用类似这个escapeSpaces（document.getElementById（＆＃39; street_1＆＃39;。）value.substring（0,10））。

参考 -  Convert Multiple Spaces to   At Beginning of Line with Javascript