- [JavaScript] - 파일 다운로드 코드 (FileDownLoad) 2023.10.23
- [JAVASCRIPT] 동적 태그생성 할 때 함수 처리 2020.01.16
- jquery 정규식 2019.12.14
- [jQuery] 회원가입 양식에 경고창 대신 붉은 글씨로 알려주기 2019.10.08
- [Jquery] alt속성 선택 해보기 2019.10.07
- [jQuery] - 기본 선택자 2019.10.01
- [jQuery] - 속성이 없는 태그의 배열 선택하기 2019.10.01
파일 다운로드 코드 - 실제로 사용했던 코드로 API 로 파라미터를 넘기면, 결과를 엑셀파일로 내려받는 코드
function requestResult() {
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var filename = "";
alert("year : " + year + " month : " + month);
if (month >= 1 && month <= 9) {
month = '0' + month;
}
fetch("/files/download/result/" + year + "/" + month, {
method: "get",
headers: {
'Content-Type': 'application/octet-stream',
}
}).then((res) => {
const disposition = res.headers.get('Content-Disposition');
filename = disposition.split(/;(.+)/)[1].split(/=(.+)/)[1];
if (filename.toLowerCase().startsWith("utf-8''"))
filename = decodeURIComponent(filename.replace(/utf-8''/i, ''));
else
filename = filename.replace(/['"]/g, '');
return res.blob();
}).then(blob => {
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = decodeURI(filename).replace(/\+/g, " ")
document.body.appendChild(a);
a.click();
a.remove();
})
};
'JavaScript' 카테고리의 다른 글
[JAVASCRIPT] 동적 태그생성 할 때 함수 처리 (0) | 2020.01.16 |
---|---|
jquery 정규식 (0) | 2019.12.14 |
[jQuery] 회원가입 양식에 경고창 대신 붉은 글씨로 알려주기 (0) | 2019.10.08 |
[Jquery] alt속성 선택 해보기 (0) | 2019.10.07 |
[jQuery] - 기본 선택자 (0) | 2019.10.01 |
function cmtlist()
{
var url = "commentsList.co";
var res_no = $("#res_no").val();
var addr ="";
var form_data = {
res_no : res_no,
}
$.ajax({
type : "post",
url : url,
data : form_data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
dataType : "json",
success : function(getData) {
var string ="";
for (var i = 0; i < getData.list.length; i++) {
addr = "commentsDelete.co?co_no="+getData.list[i].co_no;
var comments =
"<tr>"
+ "<td width='10%'>"+getData.list[i].co_email+"</td>"
+ "<td width='70%'>"+getData.list[i].co_content+"</td>"
+ "<td width='10%'>"+getData.list[i].co_date+"</td>"
+ "<td width='7%'>"
+ "<button onclick='deleteComment("+'"'+addr+'"'+");'" +">삭제</button>"
+ "</td>"
+ "</tr>";
string = string + comments;
}
$("#cmt").html(string);
},
error : function(request,status,error){
alert("code = "+ request.status + " message = " + request.responseText + " error = " + error);
console.log(error);
}
});
/* 페이지 요청시 댓글을 불러온다.*/
}
핵심은
onclick = 'deleteComment("addr");' 이 형태를 만들어주는것
() 괄호 안을 그래서 밖이 큰따옴표로 묶여있기 때문에 ' " ' 이런식으로 ' " ' addr ' " ' 만들어주는게 핵심
'JavaScript' 카테고리의 다른 글
[JavaScript] - 파일 다운로드 코드 (FileDownLoad) (0) | 2023.10.23 |
---|---|
jquery 정규식 (0) | 2019.12.14 |
[jQuery] 회원가입 양식에 경고창 대신 붉은 글씨로 알려주기 (0) | 2019.10.08 |
[Jquery] alt속성 선택 해보기 (0) | 2019.10.07 |
[jQuery] - 기본 선택자 (0) | 2019.10.01 |
출처:http://letusgo.tistory.com/30
모든 공백 체크 정규식
var regExp = /\s/g;
숫자만 체크 정규식
var regExp = /^[0-9]+$/;
이메일 체크 정규식
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
핸드폰번호 정규식
var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
일반 전화번호 정규식
var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;
아이디나 비밀번호 정규식
var regExp = /^[a-z0-9_]{4,20}$/;
휴대폰번호 체크 정규식
var regExp = /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/;
############## 정규표현식
1. 확장문자 (: backslash)
- s : 공백 문자(스페이스, 탭, 폼 피드, 라인 피드)
- b : 단어의 경계
- B 이를 제외한 모든 문자 매칭
- d : 숫자
- D : 숫자가 아닌 문자 [^0-9] 와 동일
- w : 알파벳, 숫자로 된 문자, 밑줄 기호(_) [A-Za-z0-9]
- W : w의 반대 문자 [^A-Za-z0-9]
- 특수문자 : 특수문자 자체를 의미 예) + (+ 기호 자체)
2. 특수문자
- * : 0회 이상 반복
- + : 1회 이상 반복
- ? : 0 또는 1개의 문자 매칭
- . : 정확히 1개 문자 매칭
3. 플래그
- g : 전역매칭
- i : 대소문자 무시
- m : 여러 줄 매칭
4. 기타
- () : 괄호로 묶인 패턴은 매칭된 다음, 그 부분을 기억한다.
- $1,...,$9 : 괄호로 갭처한 부분 문자열이 저장 됨.
- | : ~또는~
- {} : 반복 횟수
############## 간단한 정규 표현식
var re = /a/ --a 가 있는 문자열
var re = /a/i --a 가 있는 문자열, 대소문자 구분 안함
var re = /apple/ -- apple가 있는 문자열
var re = /[a-z]/ -- a~z 사이의 모든 문자
var re = /[a-zA-Z0-9]/ -- a~z, A~Z 0~9 사이의 모든 문자
var re = /[a-z]|[0-9]/ -- a~z 혹은 0~9사이의 문자
var re = /a|b|c/ -- a 혹은 b 혹은 c인 문자
var re = /[^a-z]/ -- a~z까지의 문자가 아닌 문자("^" 부정)
var re = /^[a-z]/ -- 문자의 처음이 a~z로 시작되는 문장
var re = /[a-z]$/ -- 문자가 a~z로 끝남
상기에 정의된 간단한 표현식을 아래에 넣어 직접 해 보시기 바랍니다.
var str = "sample string";
re.test(str)?"true":"false";
* 특수문자('''', ''^'', ''$'', ''*'', ''+'', ''?'', ''.'', ''('', '')'', ''|'', ''{'', ''}'', ''['', '']'')를 검색할 경우는 '''' 를 넣는다.
############## 간단한 응용예제
var re = /s$/; -- 공백체크
var re = /^ss*$/; -- 공백문자 개행문자만 입력 거절
var re = /^[-!#$%& amp;'*+./0-9=?A-Z^_a-z{|}~]+@[-!#$%&'*+/0-9=?A-Z^_a-z{|}~]+.[-!#$%& amp;'*+./0-9=?A-Z^_a-z{|}~]+$/; --이메일 체크
var re = /^[A-Za-z0-9]{4,10}$/ -- 비밀번호,아이디체크 영문,숫자만허용, 4~10자리
var re = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi") -- 홈페이지 체크
var re = "<[^<|>]*>"; -- 태그제거
var re = /[<][^>]*[>]/gi;-- 태그제거
str = str.replace(RegExpTag,"");
var RegExpJS = "<script[^>]*>(.*?)</script>"; -- 스크립트 제거
str = str.replace(RegExpJS,"");
var RegExpCSS = "<style[^>]*>(.*?)"; -- 스타일 제거
str = str.replace(RegExpCSS,"");
var RegExpHG = "(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/)"; -- 한글 제거
str = str.replace(RegExpHG,"");
var RegExpDS = /<!--[^>](.*?)-->/g; -- 주석 제거
str6 = str.replace(RegExpDS,"");
var regExp = /[a-z0-9]{2,}@[a-z0-9-]{2,}.[a-z0-9]{2,}/i; --이메일 체크
## 기타 응용
re = new RegExp("^@[a-zA-Z0-9]+s+","i");//문장의 처음이 @이고 문자가 1나 이상 있으면 ok
기타 상기와 동일하나 약간씩 다른 샘픔
영숫자 조합책크
if ((new RegExp(/[^a-z|^0-9]/gi)).test(frm.loginid.value)) {
alert("ID는 영숫자 조합만 사용하세요");
frm.loginid.focus();
}
홈페이지 주소 책크
function chk(v){
str='';
re = new RegExp("^http://","i");
re.test(v)?str='y':str='n';
alert(str);
}
hanmail인지를 책크
function chk(v){
str='';
re = new RegExp("hanmail.net","i");
re.test(v)?str=true:str=false;
return str
}
//본문내에서 도메인 구하기
var patt = /(http(s)?://)?w+(.w+)+/gi;
var result = (aa.value.match(patt));
//본문내에서 url구하기
상기와 유사 var patt = /(http(s)?://)?w+(.w+).S*-gi;
########### 정규식 메소드 및 사용법
참조 http://eknote.tistory.com/1251
참조 http://www.javascriptkit.com/javatutors/redev3.shtml
RegExp.exec(string)
RegExp.test(string)
String.match(pattern)
String.search(pattern)
String.replace(pattern,string)
String.split(pattern)
* 특수문자 검증 및 제거
function regExp(){
//특수문자 검증 start
var str = "2011-12-27";
var regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi
if(regExp.test(str)){
//특수문자 제거
var t = str.replace(regExp, "")
alert("특수문자를 제거했습니다. ==>" + t)
}else{
alert("정상적인 문자입니다. ==>" + str)
}
//특수문자 검증 end
}
* 닉네임 체크 - 특문 제외 2자 ~ 20자
var pattern = /^[\w\Wㄱ-ㅎㅏ-ㅣ가-힣]{2,20}$/;
[\w]는 [A-Za-z0-9_] 이다
[\W]는 \w를 제외한 특수문자들이다.
[ㄱ-ㅎ] 은 ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ
[ㅏ-ㅣ]는 ㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣ
[가-힣]는 가나다라~~타파하 ~ 기니디리~ 티피히 ~ 각낙닥락 ~ 틱픽힉 ~ 깋닣딯맇 ~ 팋핗힣 이 된다.
즉 그냥 모든 문자열에 대한 {2,20} 글자 수 체크가 된다.
****
var pattern = 정규식;
var testee = "테스트 스트링";
var true_or_false = pattern.test( testee); // 정규식 필터를 통과하면 true, 아니면 false 리턴.
다른 방법들도 있는데 나는 그냥 위와 같이 사용중이다.
아래는 내가 사용하는 정규식 몇 가지 예제..
1) 정수와 소수점 달고다니는 수들만 통과시키는 필터. 예를 들어 '12' '12.123' '-0.571' '-8100' 등에 대해 true를 리턴하고 나머지는 false 리턴.
var pattern = /^[-]?\d+(?:[.]\d+)?$/;
return pattern.test( testee);
1-2) 위의 필터에서 좀더 조건을 추가해서, 양수면서 최대 소수점 2자리 이하까지만 통과시키는 필터. 예를 들어 12.23, 0.41, 51 등에는 true를 리턴하고, -12, -9.43, 1.234 등에는 false를 리턴하는 필터.
var pattern = /^\d+(?:[.]?[\d]?[\d])?$/;
return pattern.test( testee);
2) 숫자 및 x, X, P, E 만 포함한 스트링만 통과시키는 필터.
예를 들어,
x123 : true
XPE : true
125 : true
1234O : false
pXP : false
var pattern = /[^1234567890xXPE]/;
return !(pattern.test( testee));
3) 문자 전체에서 특수문자를 하나라도 포함하지 않아야만 함
예를 들어,
@123 : false
12Hello5 : true
!!! : false
var pattern = /[^\w\s]/i;
return !(pattern.test( testee));
4) 다음과 같은 형식만 통과함. Q로 시작하면서, 0000~9999 까지의 숫자만 Q 뒤에 달고 있어야 함.
즉,
Q0001, Q0002, Q1234, Q9999 : true
Q00, Q194, Q1 : false
Q0001A : false
QUESTION : false
var pattern = /^Q[0-9][0-9][0-9][0-9]$/;
return pattern.test( testee);
5) 정규식에서 g 플래그를 쓸 때 주의해야 한다. 최근에 매칭한 곳에서부터 다시 정규식 검사를 시작하는 속성이 있다.
이것때문에 다음 문제가 일어난다. 연속적으로 한 스트링에 대해 정규식 테스팅을 하면, 처음에는 필터가 잘 동작하다가 나중에는 통과하지 말아야 할 조건을 가진 스트링이 정규식 패턴을 통과했다고 나오게 된다. 구글에서 'regex g flag consecutive' 등으로 검색하면 이 문제로 매우 많은 질문과 답이 나온다. 해결 방법은.. 난 g 플래그 대신 i 플래그를 줘서 해결했다. 아래 링크도 도움이 될 것이다.
http://stackoverflow.com/questions/15610251/why-pattern-testname-opposite-results-on-consecutive-calls
http://stackoverflow.com/questions/6739136/consecutive-calls-to-regexp-test-fail-for-pattern-with-global-option
6) 문자열 양 끝에 공백문자를 없애 주는 정규식. 예를 들어 " hi hello! "; 를 "hi hello!"; 로 바꿔 주는 코드.
(출처 : http://stackoverflow.com/questions/3000649/trim-spaces-from-start-and-end-of-string)
function trim_whitespace( str)
{
return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
7) "[192.244.1.123]" 같은 string에서 안의 ip부분만 빼낸다("192.244.1.123" 을 빼내는 작업)
function main()
{
var regex = /\[([.\d]+)]/;
var str = "[192.244.1.123]";
var res = regex.exec( str);
// print res[1] = "192.244.1.123";
}
// 정규식 휴대폰 번호 마스킹
** 출처 : http://ironnip.tistory.com/15
- num : '-' 문자가 들어있지않은 숫자로된 전화번호
- type : 0 을 보내면 가운데 자리 마스킹
function phoneFomatter(num,type){
var formatNum = '';
if(num.length==11){
if(type==0){
formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-****-$3');
}else{
formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
}
}else if(num.length==8){
formatNum = num.replace(/(\d{4})(\d{4})/, '$1-$2');
}else{
if(num.indexOf('02')==0){
if(type==0){
formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-****-$3');
}else{
formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');
}
}else{
if(type==0){
formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-***-$3');
}else{
formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
}
}
}
return formatNum;
}
phoneFomatter('01000000000'); //010-0000-0000
phoneFomatter('01000000000',0); //010-****-0000
phoneFomatter('0100000000'); //010-000-0000
phoneFomatter('0100000000',0); //010-***-0000
phoneFomatter('0200000000'); //02-0000-0000
phoneFomatter('0200000000',0); //02-****-0000
phoneFomatter('0310000000'); //031-000-0000
phoneFomatter('0310000000',0); //031-***-0000
phoneFomatter('16880000'); //1688-0000
'JavaScript' 카테고리의 다른 글
[JavaScript] - 파일 다운로드 코드 (FileDownLoad) (0) | 2023.10.23 |
---|---|
[JAVASCRIPT] 동적 태그생성 할 때 함수 처리 (0) | 2020.01.16 |
[jQuery] 회원가입 양식에 경고창 대신 붉은 글씨로 알려주기 (0) | 2019.10.08 |
[Jquery] alt속성 선택 해보기 (0) | 2019.10.07 |
[jQuery] - 기본 선택자 (0) | 2019.10.01 |
$("#name ~ p").remove();
$("#name").after("<p style = 'color : red;' > 이름을 2 ~ 5자로 입력해주세요 </p>");
>>첫 번째 줄 코드로 p태그가 계속 증가하는 것을 방지 해준다.
>>두 번째 줄 코드는 선택한 태그가 끝나는 바로 다음에 태그를 생성하는것
append()는 태그안에 내용을 추가하는 것(innerHTML)
'JavaScript' 카테고리의 다른 글
[JAVASCRIPT] 동적 태그생성 할 때 함수 처리 (0) | 2020.01.16 |
---|---|
jquery 정규식 (0) | 2019.12.14 |
[Jquery] alt속성 선택 해보기 (0) | 2019.10.07 |
[jQuery] - 기본 선택자 (0) | 2019.10.01 |
[jQuery] - 속성이 없는 태그의 배열 선택하기 (0) | 2019.10.01 |
<li>
<a href="#"><img src="images/util_menu_2.gif"alt="회원가입" /></a>
</li>
$('li:has(img[alt="회원가입"])').on("click", function(){
alert("클릭 반응 검사");
});
$("img[alt='회원가입']")과 같음 적용이 안될 때 저렇게 쓰면 된다고 하는데 ...
li 태그 안에 있는 a태그로 감싸진 img태그의 alt를 선택
'JavaScript' 카테고리의 다른 글
[JAVASCRIPT] 동적 태그생성 할 때 함수 처리 (0) | 2020.01.16 |
---|---|
jquery 정규식 (0) | 2019.12.14 |
[jQuery] 회원가입 양식에 경고창 대신 붉은 글씨로 알려주기 (0) | 2019.10.08 |
[jQuery] - 기본 선택자 (0) | 2019.10.01 |
[jQuery] - 속성이 없는 태그의 배열 선택하기 (0) | 2019.10.01 |
1. 태그선택 | <a> | $("a") |
2. 클래스 선택 | <a class = "cls"> | $(".cls") |
3. ID 선택 | <a id = "sel"> | $("#sel") |
4. 속성 선택 | <a id = "sel" name ="txt"> | $("[name = txt]") |
5. 모든 요소(태그) | 모든요소(태그) 선택 | $("*") |
'JavaScript' 카테고리의 다른 글
[JAVASCRIPT] 동적 태그생성 할 때 함수 처리 (0) | 2020.01.16 |
---|---|
jquery 정규식 (0) | 2019.12.14 |
[jQuery] 회원가입 양식에 경고창 대신 붉은 글씨로 알려주기 (0) | 2019.10.08 |
[Jquery] alt속성 선택 해보기 (0) | 2019.10.07 |
[jQuery] - 속성이 없는 태그의 배열 선택하기 (0) | 2019.10.01 |
$("p:eq()");
$("button:eq(1)").Text(); --> 두번째 button 선택
<dd class="zoom">
<button>+</button>
<button>0</button>
<button>-</button>
</dd>
'JavaScript' 카테고리의 다른 글
[JAVASCRIPT] 동적 태그생성 할 때 함수 처리 (0) | 2020.01.16 |
---|---|
jquery 정규식 (0) | 2019.12.14 |
[jQuery] 회원가입 양식에 경고창 대신 붉은 글씨로 알려주기 (0) | 2019.10.08 |
[Jquery] alt속성 선택 해보기 (0) | 2019.10.07 |
[jQuery] - 기본 선택자 (0) | 2019.10.01 |