ページ内で重複しないランダムなid属性値を生成する

使わなかった関数を供養。

万が一重複したらリトライするとか、どうしても重複し続けたら null を返すとか、いろいろ微妙です。

/**
 * ページ内で重複しないランダムなIDを生成する。
 * @param  {Number} randomLength - ランダム文字列の長さ
 * @param  {String} prefix - プレフィックス
 * @param  {String} suffix - サフィックス
 * @return {String} ページ内で重複しないID、ただし100回作り直しても既存のIDと重複していたらnull
 */
const randomId = (randomLength, prefix, suffix) => {
	prefix = prefix === undefined ? '' : prefix;
	suffix = suffix === undefined ? '' : suffix;

	const firstChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
	const chars = firstChars + '0123456789';
	const retryLimit = 100;
	let retryCount = 0;

	while (retryCount < retryLimit) {
		let id = prefix;
		for (var i = 0; i < randomLength; i++) {
			if (id.length <= 0) {
				// 先頭は英字のみ (HTML4のルール。一応)
				id += firstChars[Math.floor(Math.random() * firstChars.length)];
			} else {
				id += chars[Math.floor(Math.random() * chars.length)];
			}
		}
		id += suffix;

		// 重複チェック
		if (document.getElementById(id) === null) {
			return id;
		}
		++retryCount;
	}
	return null;
}

使うとこんな感じ↓

console.log(randomId(10));                   // -> f4GoCTRUlp
console.log(randomId(32));                   // -> ZkxAPz6sBppqA3qpwTKAEzCMEw0XETJ9
console.log(randomId(32, 'aaa__'));          // -> aaa__d4EmkPaOdx6iCWazjkw6AuEKcXORdNg9
console.log(randomId(32, '', '__bbb'));      // -> ifWkPatuFuEXqyO5NkIqsZxqlMi2CKbV__bbb
console.log(randomId(32, 'aaa__', '__bbb')); // -> aaa__1yjdlpVZE3SzM8N7bF5rXR6VBawv2Nuu__bbb

コメントのHTML4どうこうは、↓の関連記事を参照。