Javascript: вырезанная строка и возврат в разные входы

Question

Я пытаюсь вырезать строку в другой части и возвращать каждую часть в другой вход. Вот пример:

Рассмотрим следующую строку: Hello|World|!

Как вы можете видеть, есть сепаратор, который |. Я хотел бы отделить каждую часть строки, отрезанной этим |, и вернуть их на другой вход.

Я не могу использовать str.substr()(по крайней мере обычное использование этого, может быть, у вас есть трюк), так как количество символов между | не фиксирован, иногда это будет 2 символа, иногда 16, и от того, что я знаю str.substr() требует установить количество символов перед разрезом.

В основном я ищу решение, которое Excel предоставляет в функции «Конвертировать», где вы определяете разделитель, и Excel будет разделять каждую часть значения на разные ячейки каждый раз, когда он найдет набор разделителей.

Это первая часть Javascript, принимая значение текстового поля, где наклеен строка:

function cutTheString() 
{ 
    var str = document.getElementById('textarea').value; 
} 

И это будет HTML:

<textarea id="textarea"></textarea> 
<br /> 
<input type="submit" value="Cut string" onClick="cutTheString()" /> 
<input type="text" id="string1"></input> 
<input type="text" id="string2"></input> 
<input type="text" id="string3"></input> 

На данный момент у меня есть document.getElementById('string1').value = str();, который возвращает полную строку в первый вход. У меня также есть возможность преобразовать разделитель | в , с помощью var res = str.split("|");, но это действительно не помогает моему делу.

Answer 1

При условии, что у вас есть достаточно <input> элементы:

function cutTheString() 
{ 
    var str = document.getElementById('textarea').value; 
    var arrayOfStrings = str.split('|'); 
    for(var i = 0; i < arrayOfStrings.length; i++) { 
    document.getElementById("string" + (i+1)).value = arrayOfStrings[i]; 
    } 
} 

См JS Fiddle.

Answer 2

Вы можете getElementById внутри цикла, так же, как:

foreach{ getElementById(i++)} var result = result.contact(); 

Другой путь вы можете использовать JQuery, он имеет тег селекторы.

Answer 3

<script> 
    var myString = 'hello|world|!'; 
    var myArray = myString.split('|') 
    document.getElementById('string1').value = myArray[0]; 
    document.getElementById('string2').value = myArray[1]; 
    document.getElementById('string3').value = myArray[2]; 

</script> 

<div> 
    <input type='text' id='string1'></input> 
    <input type='text' id='string2'></input> 
    <input type='text' id='string3'></input> 
</div>