Friday, June 02, 2006
HTML] 자바스크립트 소스에서, 쌍따옴표 홑따옴표 (큰따옴표 작은따옴표) 표현 (이스케이프 Escape)
쌍따옴표 출력
아래 박스는AAA "BBB" AAA
라는 문자열을 웹페이지에 출력하는 방법입니다.
<script type="text/javascript">
document.write('AAA "BBB" AAA');
</script>
document.write('AAA "BBB" AAA');
</script>
HTML에서는 <a href=""> 이렇게 속성을 쌍따옴표로 둘러싸는 것이 관례입니다. 그래서 자바스크립트 소스의 문자열은 홑따옴표로 둘러싸는 것이 보통입니다. 이러면 위와 같이 마음대로 쌍따옴표를 표현할 수 있습니다.
만약 홑따옴표를 출력하려면, document.write('AAA 'BBB' AAA'); 이렇게 홑따옴표가 두 개 겹치기(nesting) 때문에 에러가 나서 문자열이 웹페이지에 출력되지 않습니다.
이때는 따옴표 바로 앞에, 백슬래시(\)를 넣어 이스케이프해 주면 됩니다.
홑따옴표 출력
<script type="text/javascript">
document.write('AAA \'BBB\' AAA');
</script>
document.write('AAA \'BBB\' AAA');
</script>
자바스크립트는, 백슬래시(\)가 앞에 붙은 문자를 문자 그 자체로만 인식하기 때문입니다.
HTML과 자바스크립트의, 따옴표 중복 문제의 해결법
<input type="submit" value="클릭하면 대화상자" onclick="alert('AAA \"BBB\" AAA');" />
위와 같이, HTML 코드 안에 삽입된 자바스크립트에서 쌍따옴표를 출력하려고 하니, 문제가 있었습니다. HTML 속성의 쌍따옴표와 중첩되었습니다. 백슬래시(\)도 통하지 않더군요.
그래서 다음과 같이, 말썽을 일으키는 문자열을 아예 변수에 대입하고, HTML 코드도 자바스크립트로 작성하는 방법을 사용하고 있습니다:
<script type="text/javascript">
var s = 'AAA "BBB" AAA';
document.write('<input type="submit" value="클릭하면 대화상자" onclick="alert(s);" />');
</script>
var s = 'AAA "BBB" AAA';
document.write('<input type="submit" value="클릭하면 대화상자" onclick="alert(s);" />');
</script>
관련 게시물: [HTML/CSS] 포스트 제목 툴팁(tooltip)의 쌍따옴표/홑따옴표 문제 해결
JavaScript Tools: Decode/Encode URI Strings
tag: html
HTML | CSS | 자바스크립트 JavaScript
Post a Comment
<< Home