반응형

게시판등의 입력폼에서 글자수를 제한하는 방법이 필요할 때가 있습니다.

input의 경우 maxlength를 사용하면 간단히 됩니다.

<input type="text" maxlength="10">

textarea에서 제한하고자 할때는 maxlength는 사용할 수 없습니다.

이때는 스크립트를 이용해야 겠죠.



jquery로 간단하게 수정해서 업데이트 합니다.


<form id="insertFrm" name="insertFrm"> 

<textarea id="test" name="test"> 

</textarea> 

</form>





<script type="text/javascript">

$(document).ready(function() {


    $('#test').on('keyup', function() {


        if($(this).val().length > 4000) {

            $(this).val($(this).val().substring(0, 4000));

        }


    });


});

</script>



출처: http://deuxism.tistory.com/12 [DEUXIGN' [émpti-spéis]]

반응형

'프로그램 관련 > jquery&jsp&HTML' 카테고리의 다른 글

select box disabled 하기 선택안되게하기  (0) 2018.08.16
table 엑셀 다운받기  (0) 2018.08.14
jquery 문자열 자르기 방식  (0) 2018.07.26
체크박스 초기화 하기  (0) 2018.07.17
jquery 팁  (0) 2018.07.17
반응형

Javascript 문자열에서 텍스트를 제거하는 방법


 Answers

이것은 jQuery와 아무 상관이 없습니다. 다음과 같이 JavaScript replace 기능을 사용할 수 있습니다.

var str = "data-123";
str = str.replace("data-", "");

이 함수에는 정규식을 전달할 수도 있습니다. 다음 예제에서는 숫자를 제외한 모든 것을 바꿉니다.

str = str.replace(/[^0-9\.]+/g, "");
 Question

그 값으로 data-123 을 가진 문자열이 있습니다. 어떻게 jQuery 나 Javascript 를 사용하면 123 을 떠나는 동안 문자열에서 data- 를 제거 할 수 있습니까?




당신은 slice ()를 사용하여 시작부터 끝까지 charterers를 returens (포함 된 끝점)

   string.slice(start , end);

여기에 몇 가지 exmp가 어떻게 작동하는지 보여줍니다 :

var mystr = ("data-123").slice(5); // jast define start point so output is "123"
var mystr = ("data-123").slice(5,7); // define start and end  so output is "12"
var mystr=(",246").slice(1); // returens "246"

Demo




match() 및 Number() 를 사용하여 number 변수 반환 :

Number(("data-123").match(/\d+$/));

// strNum = 123

위 문장이 수행하는 작업은 다음과 같습니다. 중간 작업 :

  1. str.match(/\d+$/) - str 의 끝에있는 임의의 길이의 숫자와 일치하는 배열을 반환합니다. 이 경우 단일 문자열 항목 ['123'] 포함하는 배열을 반환합니다.
  2. Number() - 숫자 유형으로 변환합니다. .match() 에서 반환 된 배열은 단일 요소를 포함하기 때문에 Number() 는 숫자를 반환합니다.



전의:-

var value="Data-123";
var removeData=value.replace("Data-","");
alert(removeData);

바라기를 이것은 당신을 위해 작동 할 것입니다.




str.split('Yes').join('No'); 

이렇게하면 특정 문자열의 모든 항목이 원래 문자열과 바뀝니다.


출처:https://code.i-harness.com/ko/q/9eacd3


반응형

'프로그램 관련 > jquery&jsp&HTML' 카테고리의 다른 글

table 엑셀 다운받기  (0) 2018.08.14
textarea , text글자제한 두기  (0) 2018.08.10
체크박스 초기화 하기  (0) 2018.07.17
jquery 팁  (0) 2018.07.17
정규식표현 전/후방 탐색  (0) 2018.07.16
반응형


체크박스 초기화 하기


$("input[type=checkbox][checked]").each(

function () {

$(this).attr('checked'false);

}

);


~~
$(this).attr('checked'false);


this 대신


$("#id").attr('checked', false);


도 가능 합니다

반응형

'프로그램 관련 > jquery&jsp&HTML' 카테고리의 다른 글

textarea , text글자제한 두기  (0) 2018.08.10
jquery 문자열 자르기 방식  (0) 2018.07.26
jquery 팁  (0) 2018.07.17
정규식표현 전/후방 탐색  (0) 2018.07.16
jquery(.before.after,.append,prepend) 사용기  (0) 2018.07.16
반응형
 
jquery_tut1.html - 기본 셀렉터

$("*") : 모두
$("div p") : 모든 <div>에 포함된 모든 <p>
$("#loginID") : id="loginID"
$(".Columns") : class="Columns"
$("p > a") : <p>에 포함된 한 단계 아래 레벨의 모든 <a>
$("div + p") : <div> 와 같은 레벨인 다음 <p>
$("div ~ p") : <div> 와 같은 레벨인 모든 <p>

// 개체 숨김
$(selector).hide();


jquery_tut2.html - 필터

$("a[title]") : title 속성이 있는 <a>
$("a[href^=mailto:]") : href 속성이 mailto로 시작하는 모든 <a> (^는 문장의 처음을 나타내는 정규표현식)
$("a[href$=.pdf]") : href 속성이 pdf파일 링크인 모든 <a> ($는 문장의 끝을 나타내는 정규표현식)
$("a[href*=taeyo.net]") : href 속성에 taeyo.net이라는 값이 포함되어 있는 모든 <a>
$("input[type=text]") : type 속성이 "text"인 모든 <input>

$("tr:first"): 모든 <tr> 중 첫 번째 <tr>
$("tr:last"): 모든 <tr> 중 마지막 <tr>
$("tr:not('selector')"): 모든 <tr> 하위 개체 중 selector에 해당되지 않는 개체
$("tr:even"): 모든 <tr> 중 짝수 번째(0부터 시작)
$("tr:odd"): 모든 <tr> 중 홀수 번째(0부터 시작)
$("tr:eq(0)"): 모든 <tr> 중 1 번째
$("tr:gt(1)"): 모든 <tr> 중 2 번째 이후
$("tr:lt(2)"): 모든 <tr> 중 3 번째 이전

$(":header"): 모든 헤더 (<h1>, <h2>, <h3> 등)
$(":animated"): 애니메이션이 포함된 모든 개체
$(":contains('text')"): text를 포함하는 모든 개체
$(":empty"): 하위 개체를 가지지 않는 모든 개체 (내부 텍스트를 가지지 않는 개체도 해당)
$(":has('selector')"): selector에 해당하는 모든 개체
$(":parent"): 모든 상위 개체 (내부 택스트를 갖는 개체도 해당)

$("td:nth-child(1/even/odd)"): 모든 1(최소 값은 1) 번째 <td> / 짝수 번째 <td> / 홀수 번째 <td> (테이블에서 세로 줄)
$("td:nth-child(2n+1)"): 모든 첫 번째 <td>(+1) 부터 2의 배수 번째 <td> (테이블에서 매 두 번째 세로 줄)
$("td:first-child"): 모든 첫 번째 <td> (테이블에서 첫 번째 세로 줄, nth-child(1)로 대체)
$("td:last-child"): 모든 마지막 <td> (테이블에서 마지막 세로 줄)
$("td:only-child"): 모든 최하위 <td>

// 선택된 개체에 스타일 시트 적용
$(selector).css("background", "yellow");

// 상위 개체
$(selector).parent()


jquery_tut3.html - 폼 필터 및 조작 기능

$(":input"): 모든 <input>, <textarea>, <select>, <button>
$(":text"): type="text"인 모든 <input>
$(":password"): type="password"인 모든 <input>
$(":radio"): type="radio"인 모든 <input>
$(":checkbox"): type="checkbox"인 모든 <input>
$(":submit"): type="submit"인 모든 <input>
$(":image"): type="image"인 모든 <input>
$(":reset"): type="reset"인 모든 <input>
$(":button"): type="button"인 모든 <input>
$(":file"): type="file"인 모든 <input>
$(":hidden"): type="hidden"인 모든 <input>

$(":enabled"): enable 상태인 모든 개체
$(":disabled"): disable 상태인 모든 개체
$(":checked"): 체크된 모든 개체
$(":selected"): 선택된 모든 개체

// 페이지 로드시에 할 일
$(document).ready(function(){
});

// 클릭 이벤트, 마우스 오버 이벤트를 설정, color 스타일 값 red로 변경
$("#id").click(someFunction).mouseover(otherFunction).css("color", "red");

// 선택된 개체들에 대해 실행할 함수 지정
$(selector).each(function(i) {
// i: 선택된 개체들의 인덱스
// $(this): 선택된 개체
});


jquery_tut4.html - 조작 기능

// 개체의 태그(선택된 개체가 여러 개일 경우 첫 번째 것)
$(selector).html()

// 개체의 태그를 val로 대체
$(selector).html("val")

// 개체의 텍스트
$(selector).text()(선택된 모든 개체의 텍스트를 결합)

// 개체의 텍스트를 val로 대체
$(selector).text("val")

// 개체의 내부에 content를 끝에 추가
$(selector).append("content")

// 개체의 내부에 content를 앞에 추가
$(selector).prepend("content")

// id를 모든 <a> 내부의 끝에 추가
$("#id").appendTo("a")

// id를 모든 <a> 내부의 앞에 추가
$("#id").prependTo("a")

// 개체의 다음에 content 추가
$(selector).after("content")

// 개체의 이전에 content 추가
$(selector).before("content")

// id를 모든 <a> 다음에 추가
$("#id").insertAfter("a")

// id를 모든 <a> 이전에 추가
$("#id").insertBefore("a")

// 선택된 개체의 하위 개체들을 제거
$(selector).empty()

// 선택된 개체들을 제거
$(selector).remove()

// 선택된 개체들 복사 및 선택
$("#id").clone()

// 선택된 개체들 복사 및 선택(이벤트 처리 포함. onclick, mouseiver...)
$("#id").clone(true)


jquery_tut5.html - 탐색 기능

// 모든 <div> 중 1 번째
$("div").eq(0)

// 선택된 개체 집합을 이전 상태로 변경(end())
$("div:odd").eq(0).css("background", "orange")
.end()    // $("div:odd")와 동일
.eq(1).css("background", "blue"); // $("div:odd").eq(1).css("background", "blue");

// 선택된 개체를 메모리에서 :odd 재검색(filter())
$("div").filter(":odd").end() // $("div")와 동일

// 선택된 개체를 메모리에서 하위 노드의 <p> 재검색(find())
$("div").find("p")

// 선택된 개체를 메모리에서 :even 아닌 것을 재검색(not())
$("div").not(":even").end() // $("div")와 동일

// 개체 확인(is())
var $myDiv = $("div").eq(5); // 변수명 앞에 '$'는 jQuery 개체 참조형
if ( $myDiv.is("div") ) { // 개체 확인
$myDiv.css("border", "4px solid yellow");
}
$myDiv.is(".orange, .blue, .lightblue") // 세 클래스 이름 중 하나만 일치해도 true

// 선택된 개체들의 텍스트를 배열로 변환(map())
var arr = $("div").map(function()
{
return $(this).text().toUpperCase();
});

// 다음 개체
$(selector).next(expr)

// 다음 모든 개체
$(selector).nextAll(expr)

// 이전 개체
$(selector).prev(expr)

// 이전 모든 개체
$(selector).prevAll(expr)

// 선택된 개체에 추가
$(selector).add(expr)

// 상위 개체 선택
$(selector).parent(expr)

// 고유한 상위 개체들 선택
$(selector).parents(expr)

// 같은 레벨인 개체들 선택
siblings(expr)


jquery_tut6.html - css와 attr 기능

// 스타일 시트 적용
$(this).css({ 'color':'yellow','font-weight':'bolder' });

// 모든 <div>를 blue 클래스로 지정
$("div").addClass("blue")

// 선택된 <div> 중 blue 클래스가 존재하면 true
$("div").hasClass("blue")

// 선택된 <div>에서 blue 클래스 제거
$("div").removeClass("blue")

// 선택된 <div>에서 blue 클래스 적용 여부를 반전
$("div").toggleClass("blue")

// 첫 <img>의 src 값
$("img").attr("src")

// 모든 <img>에 스타일을 적용
$("img").attr({ css: { border: "1px", height : "100" } })

// 모든 <img>의 title에 hello 적용
$("img").attr("title", "hello")

// 모든 <img>의 title에 function()의 리턴 값 적용
$("img").attr("title", function())

// 모든 <img>에서 title 속성 제거
$("img").removeAttr("title")


jquery_tut7.html - 이벤트

// id="MyBtn"에 click 이벤트 추가
$("#MyBtn").bind("click", function(e)
{
// MyBtn 클릭시 수행
// 사용 가능한 이벤트: blur, focus, load, resize, scroll, unload, beforeunload,
  click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
  mouseleave, change, select, submit, keydown, keypress, keyup, error
});
$("#MyBtn").bind("click", { name: "Taeyo", gender: "남" }, function(e)
{
alert(e.data.name + " / " + e.data.gender); // 두 번째 매개변수 활용
});

// id="MyBtn"에 click 이벤트 제거
$("#MyBtn").unbind("click");

// id="MyBtn"에 일회성 click 이벤트 추가
$("#MyBtn").one("click", function(e) {
alert("누가 내 버튼을 클릭한 것이냐?");");
});

// id="MyBtn"에 click 이벤트 작동
$("#MyBtn").trigger("click");


기타
// 값 얻어오기
$("#id").val();

$('form#login'): id="login"인 <form>
$('label.optional'): class="optional"인 <label>


AJAX
// 기본
$.ajax({
url: 'scripts/login.php',
type: 'POST',
data: 'account='+$('#account').attr('value')+'&password='+$('#password').attr('value'),
error: function()
{
  alert('Error loading XML document');
},
success: function(xml)
{
  $(xml).find('item').each(function()
  {
   var item_text = $(this).text();
   $('<li></li>').html(item_text).appendTo('ol');
  });
}
});

// 페이지로 데이터 보내기
$.post('save.cgi',{ text: 'my string', number: 23 },
function()
{
  alert('Your data has been saved.');
}
);


버전 1.4 추가 사항
// 개체 생성
$("<div>",
{
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#eeeeee"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");

// eq(-n)과 get(-n)
$("div").eq(-2); // 뒤에서 두 번째 개체
$("div").get(-2); // 뒤에세 두 번째 개체의 값

// first(), last()
first(): eq(0)과 같다
last(): eq(-1)과 같다

// toArray()
var arr = $('li').toArray(); // 모든 <li>를 arr에 배열로 저장

// attr()에서 현재 값을 매개변수로 참조 가능
$("#photo").attr("alt", function(index, value)
{
return "사랑하는 " + value; // value는 현재 값
});

// 함수로 값을 할당할 수 있는 함수들
.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(),
.replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), .toggleClass()

// 매개변수로 현재 값을 참조할 수 있는 함수들
.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(),
.addClass(), .removeClass(), .toggleClass()

// 지정된 css를 클래스를 모두 적용
$("input").toggleClass("normal selected");

// .data()에 키가 없으면 값을 반환하도록 개선
$('body').data('foo', 52); // boby에 foo=52
$('body').data('bar', { myType: 'test', count: 40 }); // boby에 bar={ myType: 'test', count: 40 }
alert($('body').data('foo')); // 52를 경고창에 출력
alert($('body').data()); // { foo: 52, bar: { myType: 'test', count: 40 } 경고창에 출력

// has 필터와 동일
.has(value)
.has(selector)

// .nextUntil(), .prevUntil(), .parentsUntil() 추가
$("#div1").nextUntil("div").css("background-color", "red"); // 다음 div까지 선택

// .add(), .closest() 함수가 컨텍스트를 가질 수 있도록 개선
Ajax에서 개체를 받아온 경우 동적으로 그 개체에게 add()를 사용하여 추가 가능

// .detach() 이벤트 핸들러를 남겨두고 개체를 제거
$(document).ready(function() {
var $p = $("p").click(function()
{
  $(this).css("background-color", "yellow");
});
$("p").detach(); // DOM에서 <p> 제거
$p.css("color", "red"); // 폰트 색깔 변경
$p.appendTo("body"); // 개체를 <body>에 붙임
}); // <p>를 클릭하면 배경이 노란색으로 바뀜

// 이벤트 다중 설정
$("#box").bind({
click: function()
{
  $(this).text("click");
},
mouseenter: function()
{
  $(this).text("mouseenter");
},
mouseleave: function()
{
  $(this).text("mouseleave");
}
});

// focusin, focusout 이벤트 추가(focus, blur와 동일하나 버블링을 지원. live() 사용 가능.)

// .delay() 함수 시행 지연
$('#foo').slideUp(1000).delay(500).fadeIn(1000);

// .clearQueue() 큐에 존재하지만 아직 실행되지 않은 모든 함수들을 제거

// 빈 개체인지 확인
jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

// 개체가 {}로 구성되어 있는지 확인
jQuery.isPlainObject({}) // true
jQuery.isPlainObject(new MyClass()) // false
jQuery.isPlainObject(new Date()) // false

// 첫 번째 매개변수로 지정된 DOM 개체 안에 두 번째 매개변수인 DOM 개체가 포함되어 있는지 확인
jQuery.contains($("p")[0], document.body); // false
jQuery.contains(document.body, $("p")[0]); // true


//jQuery JSON 사용

// Create test user Object
var user = new Object();
user.name = "gildong";
user.age = 18;

// Object to JSON
var userJSON = $.toJSON(user);
alert("userJSON = " + userJSON); // { name : "gildong", age : 18 }

// JSON to Object
var userObj = $.evalJSON(userJSON);
alert("userObj.name = " + userObj.name); // gildong
alert("userObj.age = " + userObj.age); // 18


// 양쪽 공백제거
var str =" asdf ";
$.trim(str);

// div 블럭요소를 부드럽게 display함
$("#testDiv").fadeIn('slow');

// div 블럭요소를 display함
$("#testDiv").show();

// div 블럭요소를 none시킴
$("#testDiv").hide();

// radio버튼 중 선택된 요소의 값을 리턴
var san = $('input:radio[name:san]:checked').val();

// select박스에서 선택되어 있는 index의 text노드값을 리턴
$('#sido_cd_mini option:selected').text();

// select박스에서 선택되어 있는 index의 value값을 리턴
$('#sido_cd_mini option:selected').val();
// 자식창에서 부모창으로 값전송
부모창id 자식창ID의 속성값
$('#usserip',opener.document).val($('#ip').val());

// 요소의 display 속성을 none일 경우 block으로 blick일 경우 none으로변경
$("#testDiv").toggle();

// 쿠키
https://github.com/carhartl/jquery-cookie // jQuery 쿠키 js 다운로드 및 참조

js 파일(jquery.cookie.js) 임포트 한 후

<쿠키생성>

1. 세션 쿠키(Session Cookie)

세션 쿠키는 브라우저 열려있는 동안만 유지된다

$.cookie('key' , 'value');

2. 만료일 지정한 쿠키

$.cookie('key' , 'value', { expires : 값 });

값의 단위는 일(日)단위 이다

주의할 점은 위 생성방식 모두 디폴트로 쿠키가 만들어진 페이지 경로에만 쿠키가 적용된다

모든 페이지에 쿠키를 적용하려면 아래와 같이 path : '/' 를 설정 해야 한다

$.cookie('key' , 'value', { expires : 값, path : '/' });

$.cookie('key' , 'value', { path : '/' });

<쿠키 읽기>

$.cookie('key');

위처럼 하면 저장된 값을 반환한다. 해당 key가 없다면 null 반환

<쿠키삭제>

$.cookie('key', null);

path 옵션을 주어 쿠키를 만들었다면 삭제할때 역시 같은 path 옵션을 줌 (이것 떄문에 삽질 대박함)

<쿠키 생성시 옵션 항목>

expires : 365

쿠키 만료를 일단위로 설정한다 생략하면 세션 쿠키로 만들어진다

path : '/'

쿠키가 적용되는 페이지 경로. 사이트 전체 페이지에 적용하려면 위와같이 설정
domain : 'domain.com'

쿠키가 적용될 도메인 디폴트가 쿠키가 만들어진 도메인이다

secure : true

디폴트는 false 다. true로 설정하면 쿠키전송은 https 프로토콜로만 가능

raw : true

디폴트는 false이다 false 일 경우는 쿠키는 생성되거나 읽을 떄 기본적으로 인코딩/디코딩을 한다(encodeURIComponent / decodeURIComponent 이용)



출처: http://javafactory.tistory.com/658 [FreeLife의 저장소]




반응형
반응형

1. 전방 탐색(lookahead)


전방 탐색(lookahead)이란 작성한 패턴에 일치하는 영역이 존재하여도 그 값이 제외되어서 나오는 패턴입니다. 전방 탐색 기호는 ?= 이며, = 다음에 오는 문자가 일치하는 영역에서 제외됩니다. 또한, 전방 탐색은 하위 표현식과 같이 소괄호로 감싸주어야만 합니다. 우선은 한번 보도록 합시다.


Reg. Expression:

.+(?=:)

Text:

http://www.abc.com
https://www.abc.com
http://www.abc.net


위에 쓰인 정규 표현식을 살펴보자면, 아무 문자가 한번 이상 연속적으로 등장하고 콜론(:) 문자가 등장하는 문자열 중에서, 콜론(:) 문자는 일치하는 영역에서 제외됩니다. 만약, 전방 탐색 기호를 쓰지 않고 콜론을 그대로 썼었다면, 콜론이 일치되는 영역에서 제외되지 않고 포함되어 버립니다. http가 아닌 http:, https가 아닌 https: 처럼 말이죠. 예를 하나 더 보도록 합시다.


Reg. Expression:

.+(?=원)

Text:

1000
2000
3000
5000
10000


위에 쓰인 정규 표현식에서는, 전의 예제에서 콜론이 아닌 "원"으로 바뀌었습니다. 이제부터, "원"이란 문자는 일치 영역에서 제외됩니다. 일치된 영역을 보시면 모두, "원"을 제외하고 "원"이 등장하기 전의 문자열들이 일치했음을 확인하실 수 있습니다. 


2. 후방 탐색(lookbehind)


이번에는 후방 탐색입니다. 전방 탐색이 앞에 있는 문자열을 탐색하는 것이라면, 후방 탐색은 뒤에 있는 문자열을 탐색합니다. 후방 탐색의 기호는 ?<= 입니다. 전방 탐색 기호의 ?와 = 사이에 < 기호가 추가된 것입니다. 후방 탐색도, 전방 탐색의 사용법과 똑같습니다. (마찬가지로, 소괄호로 감싸주어야만 합니다.) 한번 아래 예제를 보도록 합시다.


Reg. Expression:

(?<=\$)[0-9.]+

Text:

1: $600.4
2: $10.25
3: $47.33
4: $112.34


위에 쓰인 정규 표현식을 살펴보니, 후방 탐색 기호 뒤에 메타 문자인 $가 쓰였습니다. 그렇기에, \로 이스케이프 해주어야 합니다. 그 후에, 숫자와 점으로 구성된 문자 집합이 연속된 문자열을 탐색합니다. 일치된 텍스트를 살펴보시면, $ 기호 뒤에있는 문자들만 일치했음을 확인하실 수 있습니다. 예제 하나를 더 보도록 합시다.


Reg. Expression:

(?<=,)[a-z\s!]+

Text:

Hello, world!


위에 쓰인 정규 표현식을 살펴보면, 후방 탐색 기호 뒤에 , 문자가 쓰였습니다. 그 뒤에는, 소문자와 공백(\s) 그리고 ! 문자로 구성되어 있는 문자 집합이 연속된 문자열을 탐색합니다. 일치된 텍스트를 살펴보시면, ',' 문자가 제외된 나머지 문자들이 일치했음을 확인하실 수 있습니다. 이해 되시죠? 참고로, 전방 탐색과 후방 탐색은 너비가 0이며, 역참조가 불가능 하다는 것을 알아두시면 좋겠습니다.


3. 부정형 전후방탐색(negative lookaround)


이번에는 "부정형" 전후방탐색이라는 것에 주의를 하시기 바랍니다. 전에 보았던 탐색 기호들은 모두 "긍정형" 탐색이었습니다. 아래 표를 한번 보도록 합시다.


탐색 기호

설명

(?=)

긍정형 전방탐색

(?!)

부정형 전방탐색

(?<=)

긍정형 후방탐색

(?<!)

부정형 후방탐색


위의 표에서 부정형 탐색 기호에 ! 문자가 들어갔음을 확인하실 수 있습니다. 긍정형 전방탐색이 = 뒤에 있는 문자와 일치하는 텍스트를 탐색하는 것이라면, 부정형 전방탐색은 일치하지 않는 텍스트를 탐색하는 것입니다. 후방탐색도 이와 마찬가지 입니다. 한번 긍정형 후방탐색과 부정형 후방탐색이 어떠한 차이점이 있는지 예제를 통해 살펴보도록 합시다.


Reg. Expression:

\b(?<!\$)\d+

Text:

$10 5 $6 77 $788


위에 쓰인 정규 표현식을 살펴보면, 단어 경계(\b)와 부정형 후방탐색(?<!)이 쓰였고, 부정형 후방탐색 기호 뒤에 $ 문자가 등장했습니다. 그 후에는 연속된 숫자(\d+)를 의미하죠? 정리하자면, $ 뒤에 숫자가 들어간 영역은 제외하겠다는 소리입니다. $가 안들어가고 숫자만 달랑 있는 영역만 탐색하는 것입니다. 단어 경계만 설명을 보충하자면, 단어와 단어를 구분짓는 경계입니다. 여기서는 공백이 단어와 단어를 구분짓는 경계인 셈이죠. 이해되셨나요?


아쉽지만 전후방탐색(lookaround)에 대한 설명은 여기서 그만 마치도록 하겠습니다. 여기까지 읽어주셔서 감사하고, 수고하셨습니다. 정규 표현식 강좌는 전후방탐색을 마지막으로 마무리하려고 합니다. 다시 한번 수고하셨습니다.



출처: http://blog.eairship.kr/205 [누구나가 다 이해할 수 있는 프로그래밍 첫걸음]

--------------------

필자는


/^.*(?=.{6,20})(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[-,.,])(?!.*[!,@,#,$,%,^,&,*,(,)]).*$/.test(value);


이런식으로 하였다 특정 문자 '-' , '_' , '.' 만 넣고싶어서 위에처럼 하였다 (참고 jquery)





반응형
반응형

페이지 로드완료후에 이미지를 순차적으로 로드한다던지 페이지마다 다른 내용을 보여줘야 할때 등

동적으로 html요소를 추가해야 할때 아주 유용하게 사용되는 함수들 입니다.

 

before : 선택한 요소의 앞에 내용 삽입    ( 찾는 앞에 )

after : 선택한 요소의 뒤에 내용 삽입      ( 찾는 뒤에 )

prepend : 선택한요소의 자식요소 앞에 내용삽입   ( 데이터 맨 앞에)

append : 선택한요소의 자식요소 뒤에 내용삽입   (데이터 맨 뒤에)

 

 

 

 

 

예제코드

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>홈페이지제작업체 - 홈피사랑 HOMPYLOVE</title>
<style>
div{border:1px solid #000000; margin:3px; width:200px;}
div p{font-weight:bold;}
div p.red{background-color:red;}
div p.blue{background-color:blue;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script>
$(document).ready(function() {
 $(".t01 p").before("<p class='blue'>test</p>");
 $(".t02 p").after("<p class='blue'>test</p>");
 $(".t03").append("<p class='blue'>test</p>");
 $(".t04").prepend("<p class='blue'>test</p>");

});
</script>

</head>
<body>
 <div class="t01"><p class="red">test01</p></div>
 <div class="t02"><p class="red">test02</p></div>
 <div class="t03"><p class="red">test03</p></div>
 <div class="t04"><p class="red">test04</p></div>
</body>
</html>


출처 : http://hompylove.com/system/bbs/board.php?bo_table=tip&wr_id=22




반응형

'프로그램 관련 > jquery&jsp&HTML' 카테고리의 다른 글

jquery 팁  (0) 2018.07.17
정규식표현 전/후방 탐색  (0) 2018.07.16
JSP 파라미터 url 삭제하기  (0) 2018.07.16
query 제이쿼리 자식 노드 다루기  (0) 2018.07.16
jquery after() 사용하기  (1) 2018.07.16
반응형

보통은 주소창에 parameter 값이 다음과 같이 표출된다.

https://lahuman.github.io/posts/?lang=ko

이때 해당 주소에서 parameter 값만 제거 하고 싶을 경우 다음의 스크립트를 이용하면 간단히 처리 할 수 있다.

history.replaceState({}, null, location.pathname);

parameter가 제거된 값은 다음과 같다.

https://lahuman.github.io/posts/




반응형
반응형

1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기
    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()
    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근
    -- $("선택자").children().eq(N)
    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근
    -- $("선택자").children().first()
    -- $("선택자").children(":first")
    -- $("선택자").children().eq(0)
    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근
    -- $("선택자").children().last()
    -- $("선택자").children(":last")
 
3. 부모 노드 찾기
 
 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기
    -- $("선택자").parents()  모든 부모
 - 모든 부모 중 선택자에 해당하는 부모 찾기
    -- $("선택자").parents("선택자")

4. 형제 노드 찾기

 - 이전 형제 노드 찾기
    -- $("선택자").prev()
    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기
    -- $("선택자").next()
    -- $("선택자").nextAll("선택자");

5. 노드 생성,추가,이동,삭제

 - 생성
    -- $("노드")
    -- $("선택자").html("<노드>...</노드>")
    -- $("노드").clone()

 - 추가
    -- $기준노드.append($추가노드)
    -- $추가노드.appendTo($기준노드)
    -- $기준노드.prepend($추가노드)  
    -- $추가노드.prependTo($기준노드)
    -- $추가노드.insertBefore($기준노드)
    -- $기준노드.before($추가노드)
    -- $추가노드.insertAfter($기준노드)
    -- $기준노드.after($추가노드)

 - 삭제
    -- $("선택자").remove()

 - 이동
    -- $기준노드.append($이동노드)  
    -- $이동노드.appendTo($기준노드)
    -- $이동노드.insertBefore($기준노드)
    -- $기준노드.before($이동노드)
    -- $이동노드.insertAfter($기준노드)   
    -- $기준노드.after($이동노드)

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")
 
 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")


반응형
반응형

.after()

원문 링크  http://api.jquery.com/after/

.after( content, [content] )Returns : jQuery

개요 : 어떤 요소 뒤에 새로운 요소를 추가합니다.

  • .after( content, [content] )
  • content 추가될 HTML 문자열, DOM 요소, 또는 jQuery 객체
  • content 추가될 하나 이상 복수개의 DOM 요소들, 요소 배열, HTML 문자열들, 또는 jQuery 객체들
  • after( function(index) )
  • function(index) 추가될 HTML 문자열을 반환하는 함수

HTML 을 보시죠.

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

아래와 같은 스크립트를 적용해 볼까요.

$('.inner').after('<p>Test</p>');

아래와 같은 결과가 됩니다. 각 inner 클래스를 가진 <div> 요소들 뒤에 새로운 내용(content)이 추가됩니다.

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

DOM 에 있는 특정 요소를 선택해서 다른 요소 뒤쪽에 위치 시킬수도 있습니다. 아래 예제를 보시죠.

$('.container').after($('h2'));

만일 이런 방법으로 사용한다면 선택된 해당 요소는 복사가 되는 것이 아닌 이동처리가 됩니다. 아래 결과를 보시면 명확하실 겁니다.

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

만일 하나 이상의 타겟 요소가 있다면 첫번째는 이동 처리되고 그 다음 작업부터는 복사가 되어 처리 된답니다.

연결이 끊긴 DOM 노드를 삽입(Inserting Disconnected DOM nodes)

jQuery 1.4 버젼에 와서 .before() 와 .after() 함수로 연결이 끊긴 DOM 노드 작업을 할 수 있게 되었습니다. 저도 뭔 말인지 모르겠습니다. 다음 예제를 보시죠.

$('<div/>').after('<p></p>');

이 스크립트의 결과로 jQuery 집합은 div 와 paragraph 요소를 가지게 됩니다. 이 집합에 추가적인 조작을 하여 문서에 적용시킬 수 있습니다. 아래처럼 말이죠.

$('<div/>').after('<p></p>').addClass('foo')
  .filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');

결과는 닫힘 </body> 태그 바로 직전에 스크립트의 결과가 삽입됩니다. 아래와 같은 HTML 태그가 결과입니다.

 
<div class="foo"></div>
<p class="foo" id="bar">hello</p>

뭔가 번역을 하긴 했는데 이 내용과 위 내용의 소제목이 뭔 상관이 있는지 잘 모르겠는데요. ㅡㅡ;;;

함수 사용하기 (Passing a Function)

jQuery 1.4 버젼에 와서 .after() 함수는 인자로 삽입될 요소를 반환하는 함수를 사용할 수 있게 되었습니다.

$('p').after(function() {
  return '<div>' + this.className + '</div>';
});

위 예제의 결과는 p태그 후에 <div> 를 추가하는데 p태그의 클래스명(className)을 고대로 가져다가 사용할 수 있는 내용입니다. 뭐 예제가 중요한게 아니라 이것처럼 함수도 인자로 집어넣을 수 있다는 얘기입니다. 함수 내용에 신경 너무 쓰지들 마셔요.

추가 인자들(Additional Arguments)

여러개의 인자를 넘겨받아 새로운 요소를 추가하는 함수들은 .prepend().before().after() 와 같이 비슷한 함수들이 있습니다. 인자로는 DOM elements, jQuery objects, HTML 문자열들, 그리고 DOM elements로 구성된 배열 등이 올 수 있습니다.

예를 들어, 새로운 2개의 <div>와 이미 존재하는 <div>를 첫번째 p요소 다음에 추가하는 내용입니다.

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');
 
$('p').first().after($newdiv1, [newdiv2, existingdiv1]);

.after() 함수는 여러개의 인자를 가질 수 있기 때문에, 세가지 방법을 통해 <div> 를 만들어서 붙여넣을 수 있습니다. $('p').first().after($newdiv1, newdiv2, existingdiv1) 이런 것처럼 말이죠.

예 제  
p 태그 뒤에 HTML 문자열을 사용해 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>I would like to say: </p>
<script>$("p").after("<b>Hello</b>");</script>
 
</body>
</html>

미리보기

em 태그의 title 속성의 값을 찾아서 div 에 표시한 것을 볼 수 있습니다.

 

예 제  
p 태그 뒤에 텍스트 노드를 만들어 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>I would like to say: </p>
<script>$("p").after( document.createTextNode("Hello") );</script>
 
</body>
</html>

미리보기

img 태그에 src, title, alt 속성을 부여하고 있습니다. 재미있네요. map을 사용해서 추가하고 있는 예제입니다.

 

예 제  
p 태그 뒤에 jQuery 객체를 사용하여 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <b>Hello</b><p>I would like to say: </p>
<script>$("p").after( $("b") );</script>
 
</body>
</html>

미리보기

 

아주 간단하지만 정말 유용한 함수네요. 잘 사용하세요. 진짜 사용할 곳이 많을 것 같습니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.



출처: http://findfun.tistory.com/234 [즐거움을 찾자 Find Fun!!]



출처: http://gydnjs2.tistory.com/category/Jquery [프로그램 이야기]

반응형
반응형

// ajax process $.ajax({ url:"url주소", method:"POST", data:formData, dataType:"html", success: eventSuccess, error: function(xhr, status, error) {alert(error);} }); function eventSuccess(data) { window.open("주소","_blank"); }


위와 같이 하게 되면, 크롬에서는 팝업을 블락(차단) 처리 해버립니다. 여러가지 테스트를 해본 결과로는, 자바스크립트의 함수를 호출(혹은 이벤트 발생) 후 일정 시간 뒤에 팝업이 실행되는 경우에, 차단하는 것이 아닐까 추측해봅니다. 


결론적으로는, 다음과 같이 해결을 하였습니다.

// 미리 팝업을 띄워놓고. var w = window.open("about:blank","_blank"); // ajax process $.ajax({ url:"url주소", method:"POST", data:formData, dataType:"html", success: eventSuccess, error: function(xhr, status, error) {alert(error);} }); function eventSuccess(data) { //여기서 팝업된 창의 주소를 변경하자. w.location.href = "팝업주소"; }


팝업창을 미리 띄워놓은 후에, 그 주소를 변경하는 방식입니다. 


출처 = http://e2xist.tistory.com/553



출처: http://gydnjs2.tistory.com/52?category=544374 [프로그램 이야기]

반응형

+ Recent posts