Как собрать и разобрать строку?

Question

[Eugene Chefranov]

Имеется несколько input'ов, всё что в них вписывается надо одновременно записать в другой input (скрытый) разделяя полученные данные точкой с запятой (текст1;текст2;текст3;)

Затем необходимо сохраненную строку (текст1;текст2;текст3;) разобрать и вывести в HTML.

Приведите пример как это делается. Заранее благодарен.

Answer 1

[0xD34F]

HTML

<div class="inputs">
  <input><input><input>
</div>
<input class="concatenated">
<button class="show-result">show result</button>
<div class="result"></div>

JS

document.querySelector('.inputs').addEventListener('input', function() {
  document.querySelector('.concatenated').value = Array
    .from(this.querySelectorAll('input'), n => n.value)
    .filter(Boolean)
    .join(';');
});

document.querySelector('.show-result').addEventListener('click', function() {
  document.querySelector('.result').innerHTML = document.querySelector('.concatenated')
    .value
    .split(';')
    .map(n => `<div>${n}</div>`)
    .join('');
});

JQ

$('.inputs').on('input', function() {
  $('.concatenated').val($('input', this)
    .get()
    .map(n => $(n).val())
    .filter(Boolean)
    .join(';')
  );
});

$('.show-result').on('click', function() {
  $('.result').html($('.concatenated')
    .val()
    .split(';')
    .map(n => `<div>${n}</div>`)
    .join('')
  );
});

Comments

[Dima Polos]

Кто бы что не говорил, а на jQ все равно приятнее, как на мой взгляд.

Answer 2

[Dima Polos]

https://jsfiddle.net/8tccxeyd/
Вот, коряво, на скорую руку, но суть такая.

Answer 3

[Ivanq]

Пример https://jsfiddle.net/Ivanq/o73c8v7p/1/

Answer 4

[Sergey Romanov]

var text = $('input').val().join(', ')