Question

我在项目中附加元素时遇到问题。我想实时显示元素。但我得到了多个

我的观点如下：

<div class="view"> 
    <p>Hello World!.</p>
</div>
<textarea></textarea>

我想要的条件是当我输入{{hello}}时，它会计为data.length = 1，如果我输入{{hello}}{{my}}{{name}}，那么它将计为data.length = 3

然后，我使用onkeyup函数来计算实时data.length

$('textarea').on('keyup', function(e) {
    var checkMustaches = $(this).match(/\{{\w+\}}/g);
    if(checkMustaches && checkMustaches.length > 0){
        for(let i = 0; i < checkMustaches.length; i++){
           $('.view p').append('<span>'+checkMustaches[i]+'</span>')
         }
    }

});

问题是当我在textarea hello {{name}}{{id}}中输入这样的内容时。当我检查它时，它显示如下

<div class="view"> 
    <p>hello 
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{name}}</span>
      <span>{{id}}</span>
      <span>{{id}}</span>
    </p>
</div>
<textarea></textarea>

如果我删除{{id}}，则会再次添加{{name}}

我想要的东西是实时的，就像我清理胡子一样......它也会清除跨度

Answer 1

我已更正了代码中的一些错误，并添加了代码以清除span。

$('textarea').on('keyup', function(e) {
  $('.view p').html("");
  var checkMustaches = $(this).val().match(/\{\{\w+\}\}/g);
  if(checkMustaches && checkMustaches.length > 0){
    for(let i = 0; i < checkMustaches.length; i++){
      $('.view p').append('<span>'+checkMustaches[i]+'</span>')
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view"> 
    <p>Hello World!.</p>
</div>
<textarea></textarea>

Answer 2

您必须清除p

上的event内容

$('textarea').on('keyup', function(e) {
    $('.view p').html('')
    var checkMustaches = $(this).match(/\{{\w+\}}/g);
    if(checkMustaches && checkMustaches.length > 0){
        for(let i = 0; i < checkMustaches.length; i++){
           $('.view p').append('<span>'+checkMustaches[i]+'</span>')
         }
    }
});

JavaScript通过data.length追加元素

2 个答案: