JavaScript 정규 표현식을 이용한 템플릿

내부적으로 사용할 코드 만들면서 정리합니다.

사용법부터 보면 아래와 같습니다.

아래와 같이 템플릿 코드가 보여줄 태그를 설정하고

<tbody id="showList">

</tbody>

기본 템플릿 코드를 아래와 같이 설정한다.

<script id="listTemplate" type="text/x-lucky-template">

<tr>

<td><a href="merong.jsp">{{name}}</a></td>

<td>{{tel}}</td>

<td>{{address}}</td>

<td>{{email}}</td>

<td>{{age}}</td>

</tr>

</script> 

데이터와 매핑시키는 부분은 {{name}} 형식과 같이 필드명의 왼쪽에 {{, 오른쪽엔 }} 를 붙여준다.

실제 사용은 아래와 같이 한다.

var listData = [

{

"name" : "lucky",

"tel" : "010-1111-1234",

"address" : "서울",

"email" : "mail@mail.com",

"age" : "10"

},

{

"name" : "lucky2",

"tel" : "010-1111-1234",

"address" : "서울",

"email" : "mail@mail.com",

"age" : "100"

}

];

var codes = $("#listTemplate").html();

Template.render(codes, listData, "showList");

구현 소스는 아래와 같습니다.

Template = new function() {

this.tplTagRegExp = /\{\{[a-zA-Z0-9]*\}\}/gi;

};

/**

 * 화면에 list template 을 그림

 * 

 * @param {String} templateCode HTML 코드 작성용 템플릿 코드

 * @param {Object} mappingData 템플릿 코드에 매핑시킬 데이터 객체

 * @param {String} showId 데이터가 매핑된 템플릿 코드를 뿌려줄 화면 객체의 ID

 */

Template.render = function(templateCode, mappingData, showID) {

var codes = "";

for(var i = 0 ; i < mappingData.length ; i++ ) {

var rowData = mappingData[i];

var tmpStr = templateCode.replace(this.tplTagRegExp, function($1) {

var tag = $1.substring(2, $1.length-2);

var data = rowData[tag];

if( data ) {

return data;

} else {

return "";

}

});

codes += tmpStr;

}

$("#" + showID).append(codes);

};

정규표현식과 javascript 는 참 재밌습니다.

근데, 어렵습니다. ㅡㅡ;