在这种情况下，如何在jquery中对每个单词进行边界处理？

Question

Click http://jsfiddle.net/18zdmp4b/1/ to see result. Enter value in the input, press Enter key, the value will be border. However, I want to border each word alone. If I enter banana, apple and banana should be separate in two different rectangle. How can I achieve that? appreciate.

 $( "#input" ).keydown(function( event ) { //press Enter key if ( event.which == 13 ) { event.preventDefault(); //put input value into div var value=$('#input').val(); $('#test').append(" "+value); $('#test').css('border-style','solid'); } }); 

 .test {display:inline-block;} 

 <div class="test" id="test">apple</div> <input type="text" id="input"/> 

Answer 1

You will need to split the value on whitespace, loop over the words, and create individual HTML tags for each word.

 $( "#input" ).keydown(function( event ) { //press Enter key if ( event.which == 13 ) { event.preventDefault(); //put input value into div var value = $('#input').val(); var words = value.split(/\\s/); for ( var i = 0; i < words.length; i++ ) { var word = words[i]; if ( word ) { $('#test').append(' ');//Add the space between tags (optional). $('<span></span>') .text(words[i]) .css('border-style','solid') .appendTo('#test'); } } } }); 

 .test {display:inline-block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="test" id="test">apple</div> <input type="text" id="input"/>