MagicName

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'MagicName',
  fullName: 'Timo Erik Hofmeijer-Simons',
  
  fullNameObserver: Ember.observer('fullName', function() {
    if (this.get('suspend')) return;
    this.reset();
    let fullName = this.normalize(this.get('fullName'));
    this.getFirstName(fullName);
    let remainder = this.getLastName(fullName);
    this.getFirstNames(remainder);
    this.getInitials(remainder);
    this.updateFullName();
	}),
  
  updateFullName() {
    Ember.run.next(()=>{
      let p = Ember.getProperties(this, 'firstNames', 'prefix', 'lastName', 'birthNamePrefix', 'birthName');
    	let newFullName = '';
      if (p.firstNames) newFullName += p.firstNames;
      if (p.prefix) newFullName += ' ' + p.prefix;
      if (p.lastName) newFullName += ' ' + p.lastName;
      if (p.birthNamePrefix) newFullName += '-' + p.birthNamePrefix;
      if (p.birthName) {
        if (!p.birthNamePrefix) newFullName += '-' + p.birthName;
        else newFullName += ' ' + p.birthName;
      }
      console.log('p.firstNames', '*'+p.firstNames+'*')
      console.log('p.prefix', '*'+p.prefix+'*')
      console.log('p.lastName', '*'+p.lastName+'*')
      console.log('newFullName', newFullName+'*')
      if (this.get('fullName').match(/ $/)) {

        newFullName += ' ';
        console.log('newFullName',newFullName+'*')
      }
      if (this.get('fullName').match(/-$/) && !newFullName.match(/-$/)) newFullName += '-';
			
      // store current positions in variables
      let magicInput = document.querySelector('#magic');
    	var start = magicInput.selectionStart,
        	end = magicInput.selectionEnd;
      this.set('suspend', true);
      //this.set('fullName', newFullName);
      this.set('suspend', false);
      Ember.run.next(()=> {
        magicInput.setSelectionRange(start, end);
      });
    })
  },

  reset() {
    this.setProperties({
      firstName: null,
      firstNames: null,
      prefix: null,
      lastName: null,
      birthNamePrefix: null,
      birthName: null,
      initials: null,
    });
  },
  /**
  	This one is simple: first word with or without dash
  */
  getFirstName(fullName) {
    let firstName = fullName.match(/^([\w\-]+)/)[0];
    this.set('firstName', this.capitalize(firstName));
    let reg = new RegExp('^'+firstName);
    return fullName.replace(reg, '');
  },
  
  getLastName(fullName) {
    // Do we still have a dash? (Erik Klaver-van Ginhoven)
    // We'll assume the first word before the dash, until 
    // the very end of the name is the lastname 
    // (Klaver-van Ginhoven)
    if (fullName.replace(/^([\w\-]+)/, '').match(/-/)) {
      let fullLastName = fullName.replace(/^[\w]+-/, '').match(/[\w]+\-.*/)[0];
      console.log('fullLastName', fullLastName);
      let lastName = fullLastName.replace(/\w+_(\w+_)?(\w+_)?(\w+_)?(\w+_)?/, '').replace(/_/g,' ').trim().split('-')[0];
      let matchy = fullLastName.split('-')[0].match(/\w+_(\w+_)?(\w+_)?(\w+_)?(\w+_)?/);
      let prefix = matchy ? matchy[0].replace(/_/g,' ') : '';
      this.set('lastName', this.capitalize(lastName, true).trim());
      this.set('prefix', prefix);
      let fullBirthName = fullName.replace(/^[\w]+-/, '').split('-')[1];
      let birthName = fullBirthName.replace(/’?\w+_’?(\w+_)?’?(\w+_)?’?(\w+_)|’?(\w+_)?/, '');
      let matchy2 = fullBirthName.match(/’?\w+_’?(\w+_)?’?(\w+_)?’?(\w+_)?’?(\w+_)?’?/);
      let birthNamePrefix = matchy2 ? matchy2[0].replace(/_/g,' ').trim() : '';
      this.set('birthName', this.capitalize(birthName));
      this.set('birthNamePrefix', birthNamePrefix);

      let reg = new RegExp(`(${fullLastName}|${fullBirthName})`);
      fullName = fullName.replace(reg, '');
    } else if(fullName) {
      if (fullName.match(/\ [a-z-_]{0,99}$/i)) {
        let fullLastName = fullName.match(/\ [a-z-_]{0,99}$/i)[0];
        let lastName = fullLastName.replace(/\w+_(\w+_)?(\w+_)?(\w+_)?(\w+_)?/, '').trim()
        let matchy = fullLastName.match(/\w+_(\w+_)?(\w+_)?(\w+_)?(\w+_)?/);
        let prefix = matchy ? matchy[0].replace(/_/g,' ').trim() : '';
        let capitalize = lastName.length>2 && fullName.split(' ').length>1;
        this.set('lastName', capitalize? this.capitalize(lastName) : lastName);
        this.set('prefix', prefix);
        let reg = new RegExp(`${fullLastName}`);
      	fullName = fullName.replace(reg, '');
      }
    }
    return fullName;
  },
  
  getFirstNames(rest) {
    // this.set('firstNames', this.capitalize(rest, true).replace(/^-|-$/, ''));
    this.set('firstNames', rest.replace(/^-|-$/, ''));
  },

  getInitials(rest) {
    this.set('initials', rest.toUpperCase().match(/\b(\w)/g).join('.')+'.')
  },

  normalize(fullName) {
    // Strip non letters except space
    fullName = fullName.replace(/[^a-zA-Z-\ ‘’']/g, '');
     // Replace double dashes
    fullName = fullName.replace(/-+/g, '-');
    // Normalize quotes
    fullName = fullName.replace(/‘|’|'/g, '\’');
		// Strip subsequent space
    fullName = fullName.replace(/\s+/g, ' ');
    // ignore trailing dash
    fullName = fullName.replace(/-$/g, '');
    // Despace double lastname
    fullName = fullName.replace(/ ?- ?/g, '-');
    // Uppercase first letter
    fullName = this.capitalize(fullName, true);
    // Update the magic-input
    // this.set('fullName', fullName);
    // Trim space
    fullName = fullName.trim();
    // Temporarily join (*) prefixes if any
    fullName = this.joinPrefixes(fullName);
		return fullName;
  },
  
  capitalize(text, firstWordOnly) {
    // Uppercase first letter
    if (firstWordOnly) return text.replace(/(^.)/g, function(txt){return txt.charAt(0).toUpperCase()});
    else return text? text.trim().replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); }) : '';
  },
  
  joinPrefixes(fullName) {
    let splitted = fullName.replace(/^([\w]+)-/, '$1%').split('-');
    let joined;
    if (splitted.length > 1) {
      joined = this.joinPrefix(splitted[0].replace(/%/g, '-')) + '-' + this.joinPrefix(splitted[1]);
    } else {
      joined = this.joinPrefix(fullName);
    }
    return joined;
  },
  
  joinPrefix(name) {
    let prefixes = this.get('prefixes');
    let matchLength = 0;
    let joined = name;
    prefixes.forEach((p) => {
      let rgx = new RegExp('( |-|^)'+p+' ', 'i');
      if ((rgx).test(name)) {
        let rgx = new RegExp(p+' ', 'i');
        let match = name.match(rgx)[0];
        // only use the longest match
        if (match.length > matchLength) {
          matchLength = match.length;
          let rgx2 = new RegExp(match);
          joined = name.replace(rgx2, match.replace(/ /g, '_'));
        }
      }
    });
    return joined;
  },
  
  prefixes: [
    '’S',
    '’s',
    '’T',
    '’t',
    'A',
    'a',
    'Aan',
    'aan',
    'Aan ’t',
    'aan ’t',
    'Aan de',
    'aan de',
    'Aan den',
    'aan den',
    'Aan der',
    'aan der',
    'Aan het',
    'aan het',
    'Aan t',
    'aan t',
    'Af',
    'af',
    'Al',
    'al',
    'Am',
    'am',
    'Am de',
    'am de',
    'Auf',
    'auf',
    'Auf dem',
    'auf dem',
    'Auf den',
    'auf den',
    'Auf der',
    'auf der',
    'Auf ter',
    'auf ter',
    'Aus',
    'aus',
    'Aus ’m',
    'aus ’m',
    'Aus dem',
    'aus dem',
    'Aus den',
    'aus den',
    'Aus der',
    'aus der',
    'Aus m',
    'aus m',
    'Ben',
    'ben',
    'Bij',
    'bij',
    'Bij ’t',
    'bij ’t',
    'Bij de',
    'bij de',
    'Bij den',
    'bij den',
    'Bij het',
    'bij het',
    'Bij t',
    'bij t',
    'Bin',
    'bin',
    'Boven d',
    'boven d',
    'Boven d’',
    'boven d’',
    'D',
    'd',
    'D’',
    'd’',
    'Da',
    'da',
    'Dal',
    'dal',
    'Dal’',
    'dal’',
    'Dalla',
    'dalla',
    'Das',
    'das',
    'De',
    'de',
    'De die',
    'de die',
    'De die le',
    'de die le',
    'De l',
    'de l',
    'De l’',
    'de l’',
    'De la',
    'de la',
    'De las',
    'de las',
    'De le',
    'de le',
    'De van der',
    'de van der',
    'Deca',
    'deca',
    'Degli',
    'degli',
    'Dei',
    'dei',
    'Del',
    'del',
    'Della',
    'della',
    'Den',
    'den',
    'Der',
    'der',
    'Des',
    'des',
    'Di',
    'di',
    'Die le',
    'die le',
    'Do',
    'do',
    'Don',
    'don',
    'Dos',
    'dos',
    'Du',
    'du',
    'El',
    'el',
    'Het',
    'het',
    'I',
    'i',
    'Im',
    'im',
    'In',
    'in',
    'In ’t',
    'in ’t',
    'In de',
    'in de',
    'In den',
    'in den',
    'In der',
    'in der',
    'In het',
    'in het',
    'In t',
    'in t',
    'L',
    'l',
    'L’',
    'l’',
    'La',
    'la',
    'Las',
    'las',
    'Le',
    'le',
    'Les',
    'les',
    'Lo',
    'lo',
    'Los',
    'los',
    'Of',
    'of',
    'Onder',
    'onder',
    'Onder ’t',
    'onder ’t',
    'Onder de',
    'onder de',
    'Onder den',
    'onder den',
    'Onder het',
    'onder het',
    'Onder t',
    'onder t',
    'Op',
    'op',
    'Op ’t',
    'op ’t',
    'Op de',
    'op de',
    'Op den',
    'op den',
    'Op der',
    'op der',
    'Op gen',
    'op gen',
    'Op het',
    'op het',
    'Op t',
    'op t',
    'Op ten',
    'op ten',
    'Over',
    'over',
    'Over ’t',
    'over ’t',
    'Over de',
    'over de',
    'Over den',
    'over den',
    'Over het',
    'over het',
    'Over t',
    'over t',
    'S',
    's',
    'S’',
    's’',
    'T',
    't',
    'Te',
    'te',
    'Ten',
    'ten',
    'Ter',
    'ter',
    'Tho',
    'tho',
    'Thoe',
    'thoe',
    'Thor',
    'thor',
    'To',
    'to',
    'Toe',
    'toe',
    'Tot',
    'tot',
    'Uijt',
    'uijt',
    'Uijt ’t',
    'uijt ’t',
    'Uijt de',
    'uijt de',
    'Uijt den',
    'uijt den',
    'Uijt te de',
    'uijt te de',
    'Uijt ten',
    'uijt ten',
    'Uit',
    'uit',
    'Uit ’t',
    'uit ’t',
    'Uit de',
    'uit de',
    'Uit den',
    'uit den',
    'Uit het',
    'uit het',
    'Uit t',
    'uit t',
    'Uit te de',
    'uit te de',
    'Uit ten',
    'uit ten',
    'Unter',
    'unter',
    'Van',
    'van',
    'Van ’t',
    'van ’t',
    'Van de',
    'van De',
    'van de',
    'Van de l',
    'van de l',
    'Van de l’',
    'van de l’',
    'Van Den',
    'Van den',
    'van den',
    'Van Der',
    'Van der',
    'van der',
    'Van gen',
    'van gen',
    'Van het',
    'van het',
    'Van la',
    'van la',
    'Van t',
    'van t',
    'Van ter',
    'van ter',
    'Van van de',
    'van van de',
    'Ver',
    'ver',
    'Vom',
    'vom',
    'Von',
    'von',
    'Von ’t',
    'von ’t',
    'Von dem',
    'von dem',
    'Von den',
    'von den',
    'Von der',
    'von der',
    'Von t',
    'von t',
    'Voor',
    'voor',
    'Voor ’t',
    'voor ’t',
    'Voor de',
    'voor de',
    'Voor den',
    'voor den',
    'Voor in ’t',
    'voor in ’t',
    'Voor in t',
    'voor in t',
    'Vor',
    'vor',
    'Vor der',
    'vor der',
    'Zu',
    'zu',
    'Zum',
    'zum',
    'Zur',
    'zur',
    'el'
  ]
});

application.template.hbs

<div class="Output">
	<div class="Output-value">
  	<span class="Output-label">Magic input</span>
		{{input id="magic" value=fullName}}
	</div>
</div>
<hr/>
<div class="Output">
	<div class="Output-value">
		<span class="Output-label">firstName (roepnaam)</span>
    {{input class="is-assumption" value=firstName}}
  </div>
  <div class="Output-value">
		<span class="Output-label">firstNames</span>
    {{input value=firstNames}}
  </div>
  <div class="Output-value">
		<span class="Output-label">initials</span>
    {{input class="is-assumption" value=initials}}
  </div>
  <hr/>
  <div class="Output-value">
		<span class="Output-label">prefix</span>
    {{input value=prefix}}
  </div>
  <div class="Output-value">
		<span class="Output-label">lastName</span>
    {{input value=lastName}}
  </div>
  <div class="Output-value">
		<span class="Output-label">birthNamePrefix</span>
    {{input value=birthNamePrefix}}
  </div>
  <div class="Output-value">
		<span class="Output-label">birthName</span>
    {{input value=birthName}}
  </div>
</div>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
input {
  padding: 10px 4px;
  border-radius: 3px;
  border: none;
  width: 300px;
  background: rgb(243, 243, 243);
}

.Output {
  
}
.Output-label {
  display: inline-block;
  width: 170px;
  white-space: nowrap;
}
.Output-value {
  margin-bottom: 8px;
}
.Output-value input.is-assumption {
 color: rgb(160,160,160); 
}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.2.0",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "2.2.0"
  }
}