Replace n-th tab character with a string using Javascript/jQuery

Question

I have a line of items in Excel, and when I copy them in a textarea, I have several tab characters. I use this on purpose. Is there a way to replace n-th tab characters with a new line (each) and insert a specific word for each tab? Here is what I have so far http://jsfiddle.net/kjuxk7m9/

<textarea rows="10" cols="50" onblur="this.value=this.value.replace(/\t/g, '\n')">

Basically, when I enter the following in a textarea:

Item1   Item2   Item3   Item4   Item5

(between items are tab characters), my result would have to be:

Name1: Item1
Name2: Item2
Name3: Item3
Name4: Item4
Name5: Item5

Also, I might have more than one tab characters one after another. I would need them removed, so that I just have no empty lines after replacing them with new line char. Also, I would rather not use inline javascript, even if I did so far in the example.

Thanks!

UPDATE:

Input text:

Item1   Item2   Item3   Item4       item6   Item7

The expected result is:

LastName: Item1
FirstName: Item2
PhoneNumber: Item3
Nickname: Item4
AnotherRandomCategory:
Blog: Item6
OtherDetail: Item7

Item5 practically is an example of empty cell in my spreadsheet, and copying that would add an extra tab character. After having the above result, I would be able to delete that line, with a code, since that category does not have an item. The Items are examples, they are actually names, numbers, and other data. Thanks!

Answer 1

This works for your example:

document.querySelector('textarea').addEventListener('paste', function() {
  var self= this;
  setTimeout(function() {
    self.value = 
      self.value.split(/\t+/)
      .map(function(v, index) {
        return 'Name'+(index+1)+': '+v;
      })
      .join('\r');
  },1);
});

Working Fiddle

The timeout is needed, because the value of the textarea isn't updated until after the paste event.

The text is split on the tab character, and that array is updated using map, then joined with the newline character.

The regular expression /\t+/ causes split to ignore multiple tabs in a row.

If you prefer to use the blur event, the timeout isn't needed:

document.querySelector('textarea').addEventListener('blur', function() {
  this.value = 
    this.value.split(/\t+/)
    .map(function(v, index) {
      return 'Name'+(index+1)+': '+v;
    })
    .join('\r');
});

---

Update based on discussion

The code below transforms this:

… into this:

document.querySelector('textarea').addEventListener('paste', function() {
  var self= this;
  setTimeout(function() {
    var flds=['LastName',
              'FirstName',
              'PhoneNumber',
              'Nickname',
              'AnotherRandomCategory',
              'Blog',
              'OtherDetail'
             ],
        order=[0, //LastName
               1, //FirstName
               3, //Nickname
               2, //PhoneNumber
               4, //AnotherRandomCategory
               5, //Blog
               6  //OtherDetail
              ]

    self.value = 
      self.value.split(/\t/)
      .map(function(v, index) {
        if(v==='' || index>=flds.length) {
          return '';
        }
        else {
          return index+' '+flds[index]+': '+v+'\r';
        };
      })
      .sort(function(a,b) {
        a= order[a.split(' ')[0]];
        b= order[b.split(' ')[0]];
        return a-b;
      })
      .join('')
      .replace(/\r\d+ /g,'\r')
      .substr(2);
  },1);
});

Working Fiddle #2

Answer 2

You just need the regex /([a-z]+(\d+))/gi on which we will be operating based on groups captured in our replace string.

We are first removing all the spaces and then using the above regex to replace it accordingly.

document.querySelector('textarea').addEventListener('blur', function() {
   this.value = this.value.replace(/\s+/g,"").replace(/([a-z]+(\d+))/ig, "Name$2:$1\n");
});

DEMO