javascript - 为值 =""中的每个单词创建 <div>

Question

$('input').keyup(function(){
    var value = $(this).val();
    $('#values').html('<div>'+value+'</div>');
})

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

</div>

在此代码中，我试图让用户在 input 中键入一些词，例如 Hello World, This Is My Home，现在我想要发生的事情是对于每个单词，它会在 parent 空 div 中为它创建一个 div， 所以对于我这里的例子，我想要的结果应该是

$('input').keyup(function(){
    var value = $(this).val();
    $('#values').html('<div>'+value+'</div>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='Hello World, This Is My Home'>
    <div id='values'>
        <div>Hello</div>
        <div>World</div>
        <div>This</div>
        <div>Is</div>
        <div>My</div>
        <div>Home</div>
    </div>

Answer 1

您需要拆分输入值字符串中的单词，然后分别为每个单词附加 div。此外，每次附加单词时，您都可以先清空 div。 split(/[\s,]+/) 将为分隔符空格和逗号拆分字符串。您可以为主容器使用一个 id。 forEach 中回调函数的第二个参数是索引，因此您可以根据需要使用它来附加索引。

$('input').keyup(function(){
    var value = $(this).val();
    var words = value.split(/[\s,]+/);
    $('#maindiv').html("");
    words.forEach((x, index) => $('#maindiv').append('<div>'+x + '-' + (index+1) +'</div>'));
})
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='Hello World, This Is My Home'>
    <div id="maindiv">
    </div>