mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Friday, June 02, 2006

HTML] 자바스크립트 소스에서, 쌍따옴표 홑따옴표 (큰따옴표 작은따옴표) 표현 (이스케이프 Escape)


쌍따옴표 출력

아래 박스는
AAA "BBB" AAA
라는 문자열을 웹페이지에 출력하는 방법입니다.
<script type="text/javascript">
  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>

자바스크립트는, 백슬래시(\)가 앞에 붙은 문자를 문자 그 자체로만 인식하기 때문입니다.


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>


관련 게시물: [HTML/CSS] 포스트 제목 툴팁(tooltip)의 쌍따옴표/홑따옴표 문제 해결

JavaScript Tools: Decode/Encode URI Strings




tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top