JSFiddle - React, Tailwind, and code Playground

by Stepan Kasyanenko

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container">
  <span class="knife" title="knife">★</span> <span class="name">Falchion Knife | Boreal Forest</span> (<span class="exterior">Factory New</span>)
  <br>
  <br>
  <span class="souvenir">Souvenir</span> <span class="name">FAMAS | Teardown</span> (<span class="exterior">Battle-Scarred</span>)
  <br>
  <br>
  <span class="knife">★</span> <span class="stattrak">StatTrak™</span> <span class="name">Flip Knife | Lore</span> (<span class="exterior">Field-Tested</span>)
  <br>
  <br>
  <span class="knife">★</span> <span class="name">Bayonet | Autotronic</span> (<span class="exterior">Battle-Scarred</span>)
  <br>
  <br>
  <span class="name">AK-47 | Redline</span> (<span class="exterior">Field-Tested</span>)
  <br>
  <br>
  <span class="knife">★</span> <span class="name">Karambit | Bright Water</span> (<span class="exterior">Battle-Scarred</span>)
  <br>
  <br>
  <span class="stattrak">StatTrak™</span> <span class="name">Negev | Man-o'-war</span> (<span class="exterior">Minimal Wear</span>)
  <br>
  <br>
  <span class="knife">★</span> <span class="name">M9 Bayonet | Marble Fade</span> (<span class="exterior">Minimal Wear</span>)
  <br>
  <br>
  <span class="knife">★</span> <span class="stattrak">StatTrak™</span> <span class="name">Flip Knife | Gamma Doppler</span> (<span class="exterior">Minimal Wear</span>)
  <br>
  <br>
  <span class="name">Tec-9 | Nuclear Threat</span> (<span class="exterior">Factory New</span>)
  <br>
  <br>
  <span class="souvenir">Souvenir</span> <span class="name">Tec-9 | Nuclear Threat</span> (<span class="exterior">Minimal Wear</span>)
  <br>
  <br>
  <span class="knife">★</span> <span class="stattrak">StatTrak™</span> <span class="name">Karambit</span>
  <br>
  <br>
  <span class="knife">★</span> <span...

CSS

.container {
  background: #ececec;
  display: block;
  position: absolute;
  padding: 10px;
}

.knife,
.name,
.exterior,
.souvenir,
.stattrak {
  cursor: pointer;
}

.name {
  color: red;
}

.stattrak {
  color: #cf8532;
}

.souvenir {
  color: #FFD700;
}

.exterior {
  color: grey;
}

.knife {
  color: #8650AC;
}

JavaScript

var weapons = [
  '★ Falchion Knife | Boreal Forest (Factory New)',
  'Souvenir FAMAS | Teardown (Battle-Scarred)',
  '★ StatTrak™ Flip Knife | Lore (Field-Tested)',
  '★ Bayonet | Autotronic (Battle-Scarred)',
  'AK-47 | Redline (Field-Tested)',
  '★ Karambit | Bright Water (Battle-Scarred)',
  'StatTrak™ Negev | Man-o\'-war (Minimal Wear)',
  '★ M9 Bayonet | Marble Fade (Minimal Wear)',
  '★ StatTrak™ Flip Knife | Gamma Doppler (Minimal Wear)',
  'Tec-9 | Nuclear Threat (Factory New)',
  'Souvenir Tec-9 | Nuclear Threat (Minimal Wear)',
  '★ StatTrak™ Karambit',
  '★ StatTrak™ Gut Knife',
  '★ Huntsman Knife'
];
var weaponString = weapons.join("\n");

function weaponParser(weapons){
  this.weapons = weapons;
}

weaponParser.prototype.getProperties = function () {
  return [{
    name: "означает, что это нож",
    regex: /★/,
    prop: "isKnife",
    saveRegexValue:false
  }, {
    name: "скин имеет счетчик выстрелов",
    regex: /StatTrak™/,
    prop: "isShoot",
    saveRegexValue:false
  }, {
    name: "сувенирный скин",
    regex: /Souvenir/,
    prop: "isSouvenir",
    saveRegexValue:false
  }, {
    name: "качество скина",
    regex: /\(.*\)/,
    prop: "quality",
    saveRegexValue:true
  }];
}

weaponParser.prototype.parse = function () {
  var lines = this.weapons.split("\n");
  var items = this.getProperties();
  var result = [];
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    var weapon = {};
    for (var j = 0; j < items.length; j++) {
      var property = items[j];
      if(property.saveRegexValue)
      	weapon[property.prop] = property.regex.exec(line);
      else
        weapon[property.prop] = property.regex.test(line);
      if (weapon[property.prop])
        line = line.replace(property.regex, '');
    }
    weapon.name = line;
    result.push(weapon);
  }
  return result;
}

var parser = new weaponParser(weaponString);
var result = parser.parse();
console.log(result);


$(document).ready(function() {
 ...