Handlebars 템플릿 사용시 부분적으로 이스케이프 처리 하고싶을시에

 

 

 

예를들어 table에 데이터가 아래값처럼 되어 있고

name	text
홍길동	<p>안녕하세요.</p> 저는 홍길동입니다.
철이	<p>안녕!</p> 나는 철이야~

text 컬럼에서 name컬럼값을 찾아 name부분만 하이라이팅을 처리해서 style를 적용한 태그를 감싸 웹화면에 표현하고 싶을때 방법을 포스팅 해보겠습니다.

sql를 조작 가능하다고 가정하에 mysql기준으로

concat함수와 SUBSTRING_INDEX함수를 활용하여 밑에 처럼 값을 뽑아 낼수 있습니다.

<p>안녕하세요. 저는 </p>  <span style="color:red;">홍길동</span>입니다.

Handlebars 템블릿으로 해당값을 {{text}}로 처리시 웹화면에서는 바로 위 텍스트처럼 그대로 출력되지만,

<p>안녕하세요. </p>저는 <span style="color:red;>홍길동 입니다.

이스케이프 처리를 해주는 {{{text}}}를 써주면

안녕하세요.
저는 홍길동입니다.

이렇게 출력이 됩니다. 하지만 제가 원하는 출력값이 아니기 때문에

replace 함수를 이용하여 기존에 있는 < 와 > 를 각각 < 그리고 >로
변환을 해줍니다. (참고로 <만 이스케이프 처리해도 됩니다.)

그러면 sql 결과는 아래처럼 나올것이다.

&lt;p&gt;안녕하세요. &lt;/p&gt;저는 <span style="color:red;>홍길동</span> 입니다.

이렇게 나온 결과를 {{{text}}}를 써주면

< 와 >는 각각 < 와 > 로 변환이 되고,
새로 감싼 태그는 태그로 인식이 되어 우리가 원하는 결과가 출력이 된다.

<p>안녕하세요. </p>저는 홍길동입니다.

참고로 mybatis를 사용한다면 쿼리 안에 < 와 > 를 이스케이프 처리해주기 때문에 <![CDATA[]]> 로 감싸주어야 한다.

그리고 concat으로 문자열을 합칠시 기존 태그를 변환후 합쳐야 함을 유의해야 한다.

아래 쿼리를 참고하면 된다.

<![CDATA[
	CONCAT(
		SUBSTRING_INDEX(REPLACE(REPLACE(TEXT , '<', '&lt;'), '>', '&gt;'), NAME, 1)
		, CONCAT("<span style='color:red;'>", NAME , "</span>") 
		, SUBSTRING_INDEX(REPLACE(REPLACE(TEXT , '<', '&lt;'), '>', '&gt;'), NAME, -1)
	)
]]> AS FORMAT_TEXT