JavaScript通过data.length追加元素

Question

我有一个问题，在我的项目中追加<span>元素。我想实时显示<span>元素。但我有多个<span>

我有一个看起来像这样的观点：

<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}}它将再次添加<span>{{name}}</span>

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

Answer 1

你必须在每个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>')
         }
    }
});

Answer 2

我已经纠正了代码中的一些错误，并添加了清除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>