Javascript: cut string and return in different inputs

Question

I'm trying to cut a string in different part, and return each part into a different input. Here's an example:

Consider the following string: Hello|World|!

As you can see, there is a separator, which is |. I'd like to separate each part of the string cut by this | and return them into a different input.

I can't use str.substr() (at least the usual use of it, maybe you have a trick) because the number of characters between the | is not fixed, sometimes it will be 2 characters, sometimes 16, and from what I know str.substr() requires to set the number of characters before the cut.

Basically I'm looking for a solution as Excel provides in the Convert feature, where you define a separator and Excel will separate each part of the value into different cells each times he finds the separator set.

This is the first part of the Javascript, taking the value of the textarea where the string is pasted:

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

And this would be the 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>

For now I have document.getElementById('string1').value = str(); which returns the full string into the first input. I also have the possibility to transform the separator | into , by using var res = str.split("|"); but that doesn't really help my case.

[`split()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) returns an **array**. What else do you need? — PM 77-1, Sep 28 '14 at 03:09
I need to return each part of the strings into different input, not in one single input. — Orphal, Sep 28 '14 at 03:11
I don't mean to be rude, but I thought I was the one asking a question :') Do you have any example code, or link that would show me how to do what I'm trying to? Thanks :) — Orphal, Sep 28 '14 at 03:15
If you followed a link I provided in my first reply you would've already had your answer. Nevertheless I posted it for you. — PM 77-1, Sep 28 '14 at 03:22
I followed it, and the first example given is close to what I'm searching for. But I don't see anywhere any example or explanation on how to return each part of the string into different input. Instead, it just returns the entire string, cut with a different separator than before passing in the function, into one single HTML element. — Orphal, Sep 28 '14 at 03:26

Patrick Motard · Answer 1 · 2014-09-28T03:38:07.550

<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>

score 0 · Answer 2 · edited Sep 28 '14 at 04:03

0

You can getElementById within a loop, just as:

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

Other way you can use jquery, it has tag selectors.

edited Sep 28 '14 at 04:03

Unihedron

10,902
13
62
72

answered Sep 28 '14 at 03:18

Vincent_zhang

23
1
1
3

Thanks for your reply. Although, either I quite don't really understand it, or it will not do what I'm searching for. I have a big string inside a textarea with a single id, and I want to cut that string each time there is a specific separator, then return all the parts of the cut strings into different inputs. So I don't see how getting an id several times would help, because there's only one id as source of the string. – Orphal Sep 28 '14 at 03:22

PM 77-1 · Accepted Answer · 2014-09-28T03:35:10.787

0

Providing that you have enough <input> elements:

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];
  }
}

See JS Fiddle.

edited Sep 28 '14 at 03:35

answered Sep 28 '14 at 03:20

PM 77-1

12,933
21
68
111

Javascript: cut string and return in different inputs

3 Answers3

Linked