달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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


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

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

<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 는 참 재밌습니다.

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


:
Posted by 뽀기

HTML 소스에서 <img .... > 태그만 정규표현식을 이용해서 추출할 수 있다~~

Pattern.compile("<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>");

위의 패턴을 이용하면 된다는..

하나씩 보자.

<img
[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
<img 태그를 찾는다.( <img......... )

<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
>가 아닌 모든 것들..(<img height=100 width=50 ......)

<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
src= 속성을 찾는다. (<img height=100 width=50 src=.....)

<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
"나 '가 0 또는 1번 이상 나타나고, (<img height=100 width=50 src='......)

<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
>나 ", '가 1 또는 그 이상 나타나며, (<img height=100 width=50 src='10.gif......)

<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
"나 '가 0 또는 1번 이상 나타나고, (<img height=100 width=50 src='10.gif'......)

<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
>가 아닌 모든 문자들.. (<img height=100 width=50 src='10.gif' alt='10'......)

<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>
> 로 끝나는 (<img height=100 width=50 src='10.gif' alt='10'>)

문자열 이라는거죠~

<img height=100 width=50 src='10.gif' alt='10'>

아래 예제를 돌려보자~~

package cis.jcaps.app;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class PatternTest
{
 final static Pattern nonValidPattern  =  Pattern.compile("<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>");
 final static File indexFile = new File("index.html");
 
 public static void main(String[] args) {
  List<String> list = null;
  String str = null;
  StringBuilder sb = new StringBuilder();
  BufferedReader br = null;
  
  try {
   System.out.println(indexFile.exists());
   br = new BufferedReader(new FileReader(indexFile));
   while( (str = br.readLine()) != null ) {
    sb.append(str);
   }
  } catch(Exception e) {
   e.printStackTrace();
  }
  list = stripNonValidXMLCharacters(sb.toString());
  
  for(String tmp : list ) {
   System.out.println(tmp);
  }
 }

public static List<String> stripNonValidXMLCharacters(String str) {
  List<String> result = new ArrayList<String>();
  StringBuffer out = new StringBuffer();
  Matcher matcher = nonValidPattern.matcher(str);

  while (matcher.find()) {
   result.add(matcher.group(1));
  }
  matcher.appendTail(out);
  return result;
 }
}

:
Posted by 뽀기