이 작업을 하게된 계기는 이렇다.
엑셀로 온 대량의 데이터를 워드프레스 사이트에다가 HTML 게시판 형태로 보여줘야하지만
해당 프로젝트의 워드프레스에서는 자바스크립트가 먹지를 않고, 게시판 모듈을 설치해서 처리하기가 매우 까다롭고 실제 게시물 조회처리까지는 필요없어서 그냥 자사의 아무서버에 간단한 게시판 리스트 페이지를 만들어서 iframe으로 불러와서 처리하기로 하였다.
이런 형태의 게시판을 만드는것이 목적(리스트만 나오도록)
처리하게된 데이터는 위와같다. 약 127개의 데이터로 아이디값, 서점이름, 주소, 번호, 부가정보
5개의 컬럼정보가 있다(부가정보는 나중에 필요없어서 버림)
흠 어떻게하면 가장빨리 처리할수있을까 생각하다가
저 정보들을 json 데이터로 바꾼뒤에 jquery와 js를 이용해서 뿌려주기로 했다.
일단 먼저 json데이터로 변환하기위해 csv 쉼표로 분리 이 형태로 저장을 하자
불러와보니 이런식으로 되어있다. 이거보면 바로 그냥 에디트플러스 교체기능 써먹어버리면 되는각아니겠음?
자 원하는 결과물은 위 사진과같다
[{"id":"1","name":"하이북","adres":"고양시 덕양구 통일로 140 삼송테크노밸리A동 B14호","tel":"02-336-8840","img":"하이북(*-******)-매장외부정면"},{} ...]
어떻게 해야할까
위의 텍스트처럼 하면된다.
.+ => .은 아무텍스트 +는 n번반복 => 아무텍스트나 무한반복
(.+) => 아무텍스트나 무한반복되는 것을 그룹화
(.+), => 쉼표를 만날때까지 아무텍스트나 무한반복 그리고 아무텍스트를 그룹화
요런 원리로 쉼표로 구분되어있는 텍스트들을 그룹화해서 인식한뒤에 \1 \2 이렇게 그룹화한 정보를 그대로 가져다가 json 형태로 가공한다.
그리하여 위와같은 간이 게시판이 생겼다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="board.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var arr = [{
"id": "127",
"name": "북스벨리(장안대점)",
"adres": "화성시 봉담읍 삼천병마로 1182(장안대학교사회과학관1층 구내서점)",
"tel": "031-244-4376",
"img": "북스벨리(장안대점)(*-******)-매장외부정면"
}
];
</script>
<script>
var page = [];
$(function () {
var i = 0, j = 0;
$.each(arr, function () {
if (i == 9) {
page[j] += "<tr>" +
"<td>" + this.id + "</td>" +
"<td>" + this.name + "</td>" +
"<td>" + this.adres + "</td>" +
"<td>" + this.tel + "</td>" +
"</tr>";
i++;
i = 0;
j++;
}
else {
page[j] += "<tr>" +
"<td>" + this.id + "</td>" +
"<td>" + this.name + "</td>" +
"<td>" + this.adres + "</td>" +
"<td>" + this.tel + "</td>" +
"</tr>";
i++;
}
});
select(0);
});
var select = function (index) {
$('#myTable > tbody:last').empty();
$('#myTable > tbody:last').append(page[index]);
}
</script>
</head>
<body>
<table id="myTable">
<caption>게시판 리스트</caption>
<colgroup>
<col style="width: 7%">
<col style="width: 10%">
<col>
<col style="width: 11%">
<col style="width: 10%">
<col style="width: 10%">
</colgroup>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">서점명</th>
<th scope="col">주소</th>
<th scope="col">사업장 전화번호</th>
</tr>
</thead>
<tbody class="body">
</tbody>
</table>
<script>
select(0);
</script>
<a href="#" onclick="javascript:select(0)">1</a>
<a href="#" onclick="javascript:select(1)">2</a>
<a href="#" onclick="javascript:select(2)">3</a>
<a href="#" onclick="javascript:select(3)">4</a>
<a href="#" onclick="javascript:select(4)">5</a>
<a href="#" onclick="javascript:select(5)">6</a>
<a href="#" onclick="javascript:select(6)">7</a>
<a href="#" onclick="javascript:select(7)">8</a>
<a href="#" onclick="javascript:select(8)">9</a>
<a href="#" onclick="javascript:select(9)">10</a>
<a href="#" onclick="javascript:select(10)">11</a>
<a href="#" onclick="javascript:select(11)">12</a>
<a href="#" onclick="javascript:select(12)">13</a>
</body>
</html>
게시판의 소스에 대한것은 위와같다 (페이지 네이션까지 넣음)
이후 퍼블팀이 더 에쁘게 꾸며주었다.
'IT > regex' 카테고리의 다른 글
| editplus 검색한 regex 키워드 활용하기 (0) | 2018.04.13 |
|---|---|
| 네이트온 채팅 데이터화, 시각화 word cloud (0) | 2018.04.12 |