728x90
300x250
SMALL
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="dynamic-text">
<!-- DB에서 읽어온 텍스트 영역 -->
</div>
<script src="script.js"></script>
</body>
</html>
css
/* 영문 글자 간격을 늘리는 스타일 */
#dynamic-text.english-text {
letter-spacing: 0.1em; /* 양수 값으로 조정 */
}
/* 한글 글자 간격을 조절하지 않음 (기본값 사용) */
#dynamic-text.korean-text {
}
JavaScript
window.onload = function () {
const dynamicText = document.getElementById("dynamic-text");
const textContent = dynamicText.textContent.trim();
// 정규식을 사용하여 영문 또는 한글 여부 판별
const isEnglish = /^[A-Za-z\s]+$/.test(textContent);
const isKorean = /^[ㄱ-ㅎㅏ-ㅣ가-힣\s]+$/.test(textContent);
if (isEnglish) {
dynamicText.classList.add("english-text");
} else if (isKorean) {
dynamicText.classList.add("korean-text");
}
};
정규식을 사용하여 dynamic-text라는 요소에 포함된 텍스트가 영문인지 한글인지 판별하여 해당 언어에 따라서 css를 추가하여 글자 간격이 다르게 사용할 수 있다.
728x90
반응형
LIST
'javaScript' 카테고리의 다른 글
| 일반 함수 안에서 this (0) | 2023.08.06 |
|---|---|
| class에서 this (0) | 2023.08.05 |
| 프로토타입 방식 클래스 (0) | 2023.06.16 |
| 함수 방식 클래스 (0) | 2023.06.14 |
| 오브젝트 리터럴 클래스로 매개변수 전달하기 (0) | 2023.06.08 |
댓글