'jQuery 페이징 처리'에 해당되는 글 1건

728x90

 

플래그는 아래와 같은 종류가 있다.

i Ignore Case 대소문자를 구별하지 않고 검색한다.
g Global 문자열 내의 모든 패턴을 검색한다.
m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다.

 

 

숫자를 누르면 값을 추출하는 것은 curPage = $(this).text(); 로 해결된다.

▷ 의 값을 추출하는 것은 인접값 + 1 로 추출하면 된다.

curPage=parseInt($(this).prev().text()) + 1;

 

하지만 맨 마지막 페이지(▶)의 값을 추출하는 것은 위와 같은 방법으로는 해결이 되지 않는다.

PHP 와 연동된 html 소스보기를 해서 보면

<a class="page-link" href="Customer.php?p=206&m=list">7969</a>

와 같다.

 

그래서 curPage=$(this).find('a.page-link').attr('href').replace(/[^0-9]/g,''); 로 코드를 구현했다.

검색어를 넣지 않았을 때는 문제가 없는데, 검색어를 넣으면

<a class="page-link" href="Customer.php?p=206&m=list&where=name&keyword=%EC%9D%B4%EC%95%A4%EC%94%A8">206</a>

keyword 에 포함된 숫자값을 몽땅 다 반환하여 원하는 206의 값이 아니라 완전 엉뚱한 값을 반환하더라.

 

원하는 값을 추출하기 위해서는 필요한 값 주위를 먼저 제거하는 방식으로 처리했다.

https://regexr.com/ 사이트에서 내가 원하는 정규표현식 값이 추출되는지 확인한다.

 

후방탐색 정규표현식을 사용하여 원하는 값을 찾아낸다.

(?<=ABC) → 후방탐색(Positive lookbehind) : 해당 문자열(ABC)을 기준으로 뒷부분을 찾는다.

/(?<=\&m\=).+/g 를 하면 &m= 뒷부분을 전부 찾아준다.

 

curPage=$(this).find('a.page-link').attr('href').replace(/(?<=\&m\=).+/g,'');

로 해서 뒷부분 코드를 제거한다.

 

전방탐색 정규표현식 (?=ABC) 을 사용하여 앞부분 문자열을 제거한다.

/.+(?=\?p\=)/g

curPage=$(this).find('a.page-link').attr('href').replace(/(?<=\&m\=).+/g,'').replace(/.+(?=\?p\=)/g,'');

 

이렇게 하면 Customer2.php 라고 앞부분에 숫자가 들어가도 문제가 되지 않는다.

이제 마지막으로 숫자만 남기고 제거를 한다.

curPage=$(this).find('a.page-link').attr('href').replace(/(?<=\&m\=).+/g,'').replace(/.+(?=\?p\=)/g,'').replace(/[^0-9]/g,'');

 

 

전방탐색 및 후방탐색을 한꺼번에 사용해서 원하는 문자열만 추출해보자.

exec 메소드에서 반환하는 값은 일치하는 문자열의 배열이고 이 배열의 첫 번째 원소는 패턴에 일치하는 문자열이 된다. 

curPage=/(?<=\?p\=)(.+)(?=\&m\=)/.exec($(this).find('a.page-link').attr('href'))[0];

로 하면 간단하게 해결이 된다.

iOS 에서 문제가 발생하더라. Android 와 PC 크롬브라우저에서는 아무런 문제가 없다.

iOS에서 게시글 내용 출력 자체가 안되는 현상이 발생했다. 원인 파악하기 힘들어 엄청난 삽질 후, iOS Javascript는 전방탐색 기능만 지원하고 후방탐색 기능은 전혀 지원하지 못하더라.

curPage=$(this).find('a.page-link').attr('href').replace(/.+(?=\?p\=)/g,'').replace(/\D+(?=&m=)/g,'').replace(/[^0-9]/g,'');

또는

curPage=$(this).find('a.page-link').attr('href').match(/\d+(?=&m=)/g);

로 해결했다.

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
const htmlString = $.trim($('.act').html());
console.log(htmlString);
 
const shref = $('.act').find('a.page-link').attr('href');
console.log(shref);
 
// exec 메소드에서 반환하는 값은 일치하는 문자열의 배열이고 이 배열의 첫 번째 원소는 패턴에 일치하는 문자열이 된다.
// 전방탐색과 후방탐색을 동시에 적용하여 원하는 문자열만 추출한다.
const hvar = /(?<=\?p\=)([\d]+)(?=\&m\=)/.exec($('.act').find('a.page-link').attr('href'))[0];
console.log(hvar);
 
// 전방탐색을 하면서 원하는 결과를 얻는다.
const curPage = $('.act').find('a.page-link').attr('href').match(/\d+(?=&m=)/g);
console.log(curPage);
 
// 천단위 콤마찍기
const a = "10000000";
const b = a.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(b); // 10,000,000
 
const stringVal = '2021-08-09';
console.log(stringVal.replace(/-/gi,'')); //결과 : 20210809
 
// slice ( 시작 문자열 순서, 문자열 갯수)
console.log(stringVal.slice(0,2)); // 결과 : 20
 
// 시작 문자열 순서만 넣으면, 시작 문자부터 끝 문자까지 문자 반환
console.log(stringVal.slice(2)); // 결과 : 21-08-09
 
// 시작 문자열 순서를 0보다 작게 넣으면, 문자의 끝에서 파라미터 만큼 앞으로 돌아가서 끝문자까지 반환
console.log(stringVal.slice(-2)); // 결과 : 09
 
// 이메일 형식에 맞는지 검사한다.
const email = 'jsk005.charlie@gmail.com';
const regexr = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
console.log(regexr.test(email)); // true
 
});
</script>
</head>
<body>
<div id="paging">
<ul class="pagination">
    <li class="page-item">
        <a class="page-link" href="Customer.php?p=1&amp;m=list&amp;where=name&amp;keyword=%EC%9D%B4%EC%95%A4%EC%94%A8&amp;">1</a>
    </li> 
    <li class="page-item">
        <a class="page-link" href="Customer.php?p=2&amp;m=list&amp;where=name&amp;keyword=%EC%9D%B4%EC%95%A4%EC%94%A8&amp;">2</a>
    </li> 
    <li class="page-item">
        <a class="page-link" href="Customer.php?p=3&amp;m=list&amp;where=name&amp;keyword=%EC%9D%B4%EC%95%A4%EC%94%A8&amp;">3</a>
    </li> 
    <li class="page-item">
        <a class="page-link" href="Customer.php?p=4&amp;m=list&amp;where=name&amp;keyword=%EC%9D%B4%EC%95%A4%EC%94%A8&amp;">4</a>
    </li> 
    <li class="page-item">
        <a class="page-link" href="Customer.php?p=5&amp;m=list&amp;where=name&amp;keyword=%EC%9D%B4%EC%95%A4%EC%94%A8&amp;">5</a>
    </li> 
    <li class="page-item">
        <a class="page-link" href="Customer.php?p=11&amp;m=list&amp;where=name&amp;keyword=%EC%9D%B4%EC%95%A4%EC%94%A8&amp;"></a>
    </li> 
    <li class="act">
        <a class="page-link" href="Customer.php?p=206&amp;m=list&amp;where=name&amp;keyword=%EC%9D%B4%EC%95%A4%EC%94%A8&amp;"><span style="color:red;"></span></a>
    </li> 
</ul>
</div>
 
</body>
</html>
 
 

 

블로그 이미지

Link2Me

,