JSFiddle - React, Tailwind, and code Playground

by Hoàng Phương Trương

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Encrypted</td>
      <td>Search Index</td>
    </tr>
  </thead>
  <tbody id="table-body">
    
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

tr, td {
  border: 1px solid black;
}

JavaScript

const tbody = document.getElementById('table-body');
const messages = [
	'pi ka chu',
  'pì ká chù',
  'pi kà chú',
  'pikachu',
  'PIKACHU',
];

for (let msg of messages) {
	const transformed = _.deburr(msg).replace(/\s/g, '').toLowerCase()

	const encrypted = CryptoJS.AES.encrypt(transformed, 'secret');
  const index = CryptoJS.HmacSHA256(transformed, 'index_secret');
  
  tbody.innerHTML += `<tr>
    <td>${encrypted}</td>
    <td>${index}</td>
	<tr>`;
}