728x90
자바스크립트 랜덤한 문자열 만들기
랜덤 문자열 생성기
전체코드보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>랜덤 문자열 생성기</title>
<style>
.random_container {
max-width: 600px;
margin: auto;
background-color: white;
padding: 20px 30px 30px 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.random_h2 {
text-align: center;
margin-bottom: 25px;
}
.random_option-group {
margin-bottom: 20px;
}
.random_option-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.random_checkbox-group, .random_radio-group {
display: flex;
flex-wrap: wrap;
}
.random_checkbox-group label, .random_radio-group label {
width: 50%;
margin-bottom: 8px;
font-weight: normal;
}
.random_checkbox-group input, .random_radio-group input {
margin-right: 10px;
}
.random_generate-btn {
width: 100%;
padding: 12px;
background-color: #008CBA;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
.random_generate-btn:hover {
background-color: #005f6a;
}
.random_result-section {
margin-top: 25px;
}
.random_result-item {
display: flex;
align-items: center;
margin-bottom: 15px;
background-color: #f9f9f9;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ddd;
}
.random_result-item span {
flex: 1;
word-break: break-all;
font-size: 16px;
}
.random_copy-btn {
padding: 6px 12px;
margin-left: 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.random_copy-btn:hover {
background-color: #45a049;
}
.random_error {
color: red;
margin-bottom: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="random_container">
<h2 class="random_h2">랜덤 문자열 생성기</h2>
<div class="random_option-group">
<label for="length">문자열 길이 (1-30):</label>
<input type="number" id="length" name="length" min="1" max="30" value="10" style="width: 100%; padding: 8px; font-size: 16px;">
</div>
<div class="random_option-group">
<label>포함할 문자 유형:</label>
<div class="random_checkbox-group">
<label><input type="checkbox" id="includeLowercase" checked> 소문자</label>
<label><input type="checkbox" id="includeUppercase" checked> 대문자</label>
<label><input type="checkbox" id="includeNumbers" checked> 숫자</label>
<label><input type="checkbox" id="includeSpecial" checked> 특수문자</label>
</div>
</div>
<div class="random_option-group">
<label>시작 문자 유형:</label>
<div class="random_radio-group">
<label><input type="radio" name="startType" value="none" checked> 제한 없음</label>
<label><input type="radio" name="startType" value="lowercase"> 소문자로 시작</label>
<label><input type="radio" name="startType" value="uppercase"> 대문자로 시작</label>
<label><input type="radio" name="startType" value="number"> 숫자로 시작</label>
<label><input type="radio" name="startType" value="special"> 특수문자로 시작</label>
</div>
</div>
<button id="random_generateBtn" class="random_generate-btn">생성하기</button>
<div class="random_error" id="random_error"></div>
<div class="random_result-section" id="results"></div>
</div>
<script>
document.getElementById('random_generateBtn').addEventListener('click', function() {
const length = parseInt(document.getElementById('length').value);
const includeLowercase = document.getElementById('includeLowercase').checked;
const includeUppercase = document.getElementById('includeUppercase').checked;
const includeNumbers = document.getElementById('includeNumbers').checked;
const includeSpecial = document.getElementById('includeSpecial').checked;
const startType = document.querySelector('input[name="startType"]:checked').value;
const random_errorDiv = document.getElementById('random_error');
const resultsContainer = document.getElementById('results');
// 초기화
random_errorDiv.textContent = '';
resultsContainer.innerHTML = '';
// 유효성 검사
if (isNaN(length) || length < 1 || length > 30) {
random_errorDiv.textContent = '문자열 길이는 1에서 30 사이의 숫자여야 합니다.';
return;
}
if (!includeLowercase && !includeUppercase && !includeNumbers && !includeSpecial) {
random_errorDiv.textContent = '적어도 하나 이상의 문자 유형을 선택해야 합니다.';
return;
}
// 시작 문자 유형이 포함되어 있는지 확인
if (startType !== 'none') {
let startIncluded = false;
switch(startType) {
case 'lowercase':
startIncluded = includeLowercase;
break;
case 'uppercase':
startIncluded = includeUppercase;
break;
case 'number':
startIncluded = includeNumbers;
break;
case 'special':
startIncluded = includeSpecial;
break;
}
if (!startIncluded) {
random_errorDiv.textContent = '시작 문자 유형이 포함된 문자 유형 중 하나여야 합니다.';
return;
}
}
// 문자 집합 정의
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const numberChars = '0123456789';
const specialChars = '!@#$%^&*()_+[]{}|;:,.<>?';
let allChars = '';
let startChars = '';
if (includeLowercase) allChars += lowercaseChars;
if (includeUppercase) allChars += uppercaseChars;
if (includeNumbers) allChars += numberChars;
if (includeSpecial) allChars += specialChars;
if (startType === 'lowercase') {
startChars = lowercaseChars;
} else if (startType === 'uppercase') {
startChars = uppercaseChars;
} else if (startType === 'number') {
startChars = numberChars;
} else if (startType === 'special') {
startChars = specialChars;
}
// 문자열 생성 함수
function generateString() {
let result = '';
if (startChars) {
result += startChars.charAt(Math.floor(Math.random() * startChars.length));
for (let i = 1; i < length; i++) {
result += allChars.charAt(Math.floor(Math.random() * allChars.length));
}
} else {
for (let i = 0; i < length; i++) {
result += allChars.charAt(Math.floor(Math.random() * allChars.length));
}
}
return result;
}
const randomString = generateString();
// 결과 항목 생성
const resultItem = document.createElement('div');
resultItem.className = 'random_result-item';
const resultSpan = document.createElement('span');
resultSpan.textContent = randomString;
const copyBtn = document.createElement('button');
copyBtn.textContent = '복사';
copyBtn.className = 'random_copy-btn';
copyBtn.addEventListener('click', function() {
copyToClipboard(randomString);
copyBtn.textContent = '복사됨';
copyBtn.disabled = true;
setTimeout(() => {
copyBtn.textContent = '복사';
copyBtn.disabled = false;
}, 2000);
});
resultItem.appendChild(resultSpan);
resultItem.appendChild(copyBtn);
resultsContainer.appendChild(resultItem);
});
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
// navigator.clipboard API 사용
return navigator.clipboard.writeText(text);
} else {
// textarea를 이용한 복사
let textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // 화면에 표시되지 않도록
textarea.style.left = '-999999px';
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
return new Promise((res, rej) => {
document.execCommand('copy') ? res() : rej();
textarea.remove();
});
}
}
</script>
</body>
</html>
728x90
'javascript' 카테고리의 다른 글
| 자바스크립트(JavaScript) 구글스프레드시트 데이터 가져오기 (0) | 2025.02.13 |
|---|---|
| 내컴퓨터 ip 확인하기 가져오기 ip가져오는 api 사이트 (1) | 2024.10.14 |
| 자바스크립트로 페이지네이션(pagination) 만들기 (0) | 2024.10.08 |
| vanilla javascript navigator로 사용자 언어, 배터리 상태, 위치, 기타 정보 가져오기 (1) | 2024.10.08 |
| Vanilla JS URL Encoder Decoder 자바스크립트 URL 인코더 디코더 (0) | 2024.09.20 |
