JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-12">

      <div class="panel panel-default">
        <div class="panel-heading"><b>Генератор прозвищ Гриньки Тухлого</b></div>
        <div class="panel-body">
          <div id="names">

          </div>
        </div>
        <div class="panel-footer">
          <button class="btn btn-primary" id="more">
            Хочу еще имена для Гриньки!
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

JavaScript

function Govnomaz() {
  this.name = ['Грин[олаз|ч|омаз|ожоп]', 'Гриньк[а|о|ер]', 'Гринуэ'];
  this.last = [
    'Скрюч[емаз|ефон|инз|ерз|ино|ехер|елаз]',
    'Тух[ляч|ляк|лячина|лер|тухлян|лехер]',
  ];
  this.middle = [
    '[Штрибанович|Штрибан]',
    'Говно[лазович|жопович|мордов|рылов]',
  ]
}

function Template(nameStorage) {
  this.nameStorage = nameStorage;
}

Template.prototype = {

  applyTemplate: function(item) {
    var reg = /\[(.*?)\]/g;
    var matches = reg.exec(item);
    while (matches != null) {
      var match = matches[1];
      if (match.indexOf('|') != -1) {
        var rndItem = this.arrayRandom(match.split('|'));
        item = item.replace(matches[0], rndItem);
      }
      matches = reg.exec(item);
    }
    return item;
  },

  arrayRandom: function(array) {
    return array[Math.floor(Math.random() * array.length)];
  },

  randomLastname: function() {
    return this.applyTemplate(this.nameStorage.last[Math.floor(Math.random() * this.nameStorage.last.length)]);
  },

  randomName: function() {
    return this.applyTemplate(this.nameStorage.name[Math.floor(Math.random() * this.nameStorage.name.length)]);
  },

  randomMiddle: function() {
    return this.applyTemplate(this.nameStorage.middle[Math.floor(Math.random() * this.nameStorage.middle.length)]);
  },

}

$('document').ready(function() {
  var tpl = new Template(new Govnomaz());

  $('#more').click(function() {
    var content = '';
    for (var i = 0; i < 5; i++) {
      if (Math.floor(Math.random()) % 2 == 0)
        content = content + tpl.randomLastname() + ' ' + tpl.randomMiddle() + ' ' + tpl.randomName() + '</br>';
      else
        content = content + tpl.randomName() + ' ' + tpl.randomMiddle() + ' ' + tpl.randomLastname() + '</br>';
    }
    $('#names').html(content);
  });

	$('#more').click();

});