Javascript 创建<；部门>；对于值中的每个单词=“&引用；

$（'input'）.keyup（函数（）{
var值=$（this.val（）；
$（'#values'）.html（''+value+''）；
})

---

函数的问题是它总是附加到所有div。 所以我在一个Div中添加了一个类名，所以每个单词都被添加到该Div中

此外，每次用户按任意键时都会运行事件。因此，我添加了一个

if

，允许用户点击回车键来运行该函数

 $('input').keyup(function(e){

   // to check for enter keypress
   if(e.which==13){// 32 for space bar if you perfer
      var value = $(this).val();
      $('.Container').append('<div>'+value+'</div>');
   }
})


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text'>
<div class="Container">

</div>

$（'input'）.keyup（函数（e）{
//要检查是否存在回车键，请按enter键
如果（e.which==13）{//32表示空格键
var值=$（this.val（）；
$（'.Container'）。追加（''+value+''）；
}
})

您需要拆分输入值字符串中的单词，然后分别为每个单词添加div。此外，每次追加单词时，可以首先清空div。

split（/[\s，]+/）

将拆分字符串中的分隔符空格和逗号。您可以使用主容器的id。forEach中回调函数的第二个参数是index，所以如果需要，可以使用它来附加索引

$（'input'）.keyup（函数（）{
var值=$（this.val（）；
var words=value.split（/[\s，]+/）；
$（'#maindiv'）.html（“”）；
words.forEach（（x，index）=>$（'maindiv'）.append（''+x+'-''+（index+1）+''）；
})

$（'input'）.keyup（函数（）{
var wrap=$（'div.hello'）；
wrap.empty（）；
var数组=$（this.val（）.split（“”）；
array.forEach（函数（元素）{
wrap.append（“”+元素.replace（“”，“”，“”）+“”）；
});
})

---

您必须使用

拆分方法

此外，您必须为
main
div使用
id
属性，以避免
duplicate
div

在本例中，您将看到呈现的
2^n
单词


$（'input'）.keyup（函数（）{
var值=$（this.val（）.split（“”）；
$（'#main'）.empty（）；
值。forEach（函数（word）{
$（'#main'）。追加（''+word+''）；
});
})
在添加新元素之前，需要清除父div；要非常小心使用
.html（）
来避免脚本注入：

$('input').keyup(function(){
   var html = $(this).val().replace(/(\w+)/g, '<div>$1</div>')
   $('div').html('');
   $('#values').append(html);
});

$（'input'）.keyup（函数（）{
var html=$（this.val（）.replace（/（\w+）/g，$1'））
$（'div'）.html（“”）；
$（'#values'）.append（html）；
});
$（'div'）
表示
选择页面中的所有。。。包括上一次击键时创建的。所以，击键1创建一个div，击键2选择2个div并再创建2个div，击键3选择8个div并再创建8个div。。。这是危险的指数。给你的初始div一个ID，然后只选择这个

优化：


缓存jQuery对象并重用它们，而不是在每次击键时查找DOM并构建新的jQuery对象

e.target.value
比获取
$（this.val（）



const$container=$（“#container”）
$（'input'）.keyup（e=>{
$container.empty（）
e、 target.value.trim（）.split（“”）.forEach（word=>{
$container.append（`${word}`）；
})
})
.word{
边框：蓝色实心1px；
}

您正在追加内容，而不是替换内容。尝试使用
.html（）
而不是
.append（）
您可以使用
$（'div'）
表示
选择页面中的所有。。。包括上一次击键时创建的。所以，击键1创建一个div，击键2选择2个div并再创建2个div，击键3选择8个div并再创建8个div。。。这是危险的指数。给你的初始div一个ID，然后只选择这个。@JeremyThille现在将用@dlopez
.html（）
而不是
.append（）
来解决这个问题。可以添加单词顺序号吗？像《Hello-1 World-2》
？或者它需要制作一个数组，然后继续？这段代码得到了三次投票和一次验证。。。当然，它可以工作，但它非常沉重而且没有优化。。。