generate-unique-id
Version:
Generate a unique random ID string.
141 lines (118 loc) • 5.34 kB
HTML
<html lang="en">
<meta charset="UTF-8">
<meta name="description" content="Generate a unique random ID string">
<meta name="keywords" content="generate, unique id, random id, javascript, id">
<meta name="author" content="Stefan Milenkovic">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate Unique ID - GUI demo - v2.0.3</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="./demo/index.css">
</head>
<body>
<div class="wrapper">
<div class="prev-ids"></div>
<div class="content">
<h1 id="id" class="id"></h1>
<div id="code-body" class="code-body">
<code class="code"></code>
<button id="copy-code-btn">Copy</button>
</div>
</div>
<div class="git">
<a href="https://github.com/steve-232/generate-unique-id" target="_blank">Generate Unique ID</a>
<i>v2.0.2</i>
</div>
<div class="settings-panel">
<form id="form">
<div class="input-cell">
<label for="length">Length: </label>
<span id="id-length" style="margin-right: 10px;">20</span>
<input type="range" id="length" name="length" min="1" max="100" value="20">
</div>
<div class="input-cell">
<input type="checkbox" id="use-letters" name="use-letters" checked>
<label for="use-letters">Use letters</label>
</div>
<div class="input-cell">
<input type="checkbox" id="use-numbers" name="use-numbers" checked>
<label for="use-numbers">Use numbers</label>
</div>
<div class="input-cell">
<label for="include-symbols">Include Symbols</label>
<input type="text" id="include-symbols" name="include-symbols" placeholder="@, #, $">
</div>
<div class="input-cell">
<label for="exclude-symbols">Exclude Symbols</label>
<input type="text" id="exclude-symbols" name="exclude-symbols" placeholder="a, b, c">
</div>
<div class="input-cell">
<button type="reset">Reset</button>
</div>
<div class="input-cell">
<button>Generate ID</button>
</div>
</form>
</div>
</div>
</body>
<script src="./generateUniqueId.js"></script>
<script>
const form = document.getElementById('form');
const idLength = document.getElementById('id-length');
const id = document.getElementById('id');
const prevIds = document.querySelector('.prev-ids');
const code = document.querySelector('.code');
const copyCodeBtn = document.getElementById('copy-code-btn');
function generateIdAndUpdateUi(args = {}, { length = 20, useLetters = true, useNumbers = true, includeSymbols = [], excludeSymbols = [] } = args) {
const newId = generateUniqueId({ length, useLetters, useNumbers, includeSymbols, excludeSymbols});
const span = document.createElement('span');
span.textContent = newId;
id.textContent = newId;
prevIds.appendChild(span);
prevIds.scrollLeft = prevIds.scrollWidth;
let output = `const id = generateUniqueId(`;
let outputObj = {};
if (length != 20) outputObj.length = length;
if (!useLetters) outputObj.useLetters = false;
if (!useNumbers) outputObj.useNumbers = false;
if (includeSymbols.length) outputObj.includeSymbols = includeSymbols;
if (excludeSymbols.length) outputObj.excludeSymbols = excludeSymbols;
for (const key in outputObj) {
output += `\n ${key}: ${outputObj[key].constructor.name === 'Array' ? "[" + outputObj[key] + "]" : outputObj[key]},`
}
if (Object.keys(outputObj).length) {
output = output.slice(0, 28) + '{' + output.slice(28);
output += '\n}';
}
output = output.replace(/,(?=[^,]*$)/, '');
output += ');';
code.textContent = output;
}
form.length.addEventListener('input', () => idLength.textContent = form.length.value);
form.addEventListener('submit', function(e) {
e.preventDefault();
const pluginSettings = {};
pluginSettings.length = this.length.value;
pluginSettings.useLetters = this['use-letters'].checked;
pluginSettings.useNumbers = this['use-numbers'].checked;
if (this['include-symbols'].value.length) pluginSettings.includeSymbols = this['include-symbols'].value.trim().split(',').map(symbol => symbol.trim());
if (this['exclude-symbols'].value.length) pluginSettings.excludeSymbols = this['exclude-symbols'].value.trim().split(',').map(symbol => symbol.trim());
if (!pluginSettings.useLetters && !pluginSettings.useNumbers && !pluginSettings.hasOwnProperty('includeSymbols') && !pluginSettings.hasOwnProperty('excludeSymbols')) {
alert('Those options will not create a valid result');
} else {
generateIdAndUpdateUi(pluginSettings);
}
});
form.addEventListener('reset', () => idLength.textContent = 20);
window.addEventListener('load', () => generateIdAndUpdateUi());
copyCodeBtn.addEventListener('click', () => {
const textareaElem = document.createElement('textarea');
document.getElementById('code-body').appendChild(textareaElem);
textareaElem.value = code.textContent;
textareaElem.select();
document.execCommand("copy");
textareaElem.remove();
});
</script>
</html>