EL/JSTL, Javascript 함께 사용할 때 따옴표(") 홑따옴표(') 처리

문제

현재 유지보수 중인 시스템은 ajax를 사용하지 않고 JSP에서 JSTL/EL로 그리고 있다.

게시판 형태의 목록이 있는데 각 건마다 버튼을 추가할 업무가 생겼다.

<span class="favorite" onclick="jsfunction('${item.title }');">버튼</span>

이런 식으로 onclick에 추가하였으나 특정 버튼에서 작동하지 않는 현상이 발생하였다.

이유는  자바스크립트 함수 호출 시 파라미터에 따옴표(혹은 홑따옴표)가 있어서 onclick=" ....... 에 문법 오류가 발생하기 때문.

예컨대 최종 파싱된 파싱된 HTML소스를 보면

item.title이 <회사에서 '공유'가 어려운 이유> 일 경우

<span class="favorite" onclick="jsfunction('회사에서 '공유'가 어려운 이유');">버튼</span>

이런 결과가 나온다.

해결방안.

JSTL의 replace로 해당 문자를 치환해주니 된다.

우선 jsp파일 상단에 fn 태그라이브러리를 사용하겠다고 선언한다.

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

기존

${item.title }

변경

${fn:replace(item.title, "'", "\\'") }

쪼맘난 문자들이 섞여서 잘 안보이겠지만    '  를   \\'   로 바꾸어주었다. javascript 코드를 쓸 때 홑따옴표를 escape 문자로 치환해준 것이다. 

escape 문자(\)가 두 개인 이유는, EL표현식에서도 escape 해야해서...

<span class="favorite" onclick="jsfunction('${fn:replace(item.title, "'", "\\'") }');">버튼</span>

파싱된 HTML 소스코드는 대략 이렇게

<span class="favorite" onclick="jsfunction('회사에서 \'공유\'가 어려운 이유');" style="display: none;"></span>

지금은 레거시 시스템이라 어쩔 수 없지만, 인터랙티브한 웹을 만들 때는 JSP템플릿으로 개발하는 것이 별로 좋은 선택이 아닌 것 같다. 갈수록 JS Framework로 개발한 SPA 비중이 높아지는 데는 이유가 있다.