본문 바로가기
개발/jQuery

jQuery (제이쿼리) - jQuery 특정 단어를 기준으로 나누고 붙이는 split, join

by 루 프란체 2018. 6. 17.

제이쿼리에는 특정 단어를 기준으로 배열을 만들 수 있는 split 이라는 함수와

배열 사이에 특정 단어를 넣어 연결시킬 수 있는 join 이라는 함수가 존재한다.


split 이라는 함수는 보통 파라미터를 받거나 특정한 패턴을 기준으로 값을 받을 때 많이 사용하고

join 은 뭐 상황에 따라 다르겠지만 split 과 반대로 특정한 패턴을 만들 때 사용한다고 볼 수 있겠다.


우선 split 으로 간단한 예제를 만들어보자.

$(document).ready(function() {
	var testResult = "세종대왕^90|이순신^78|장영실^100|김정호^98|신사임당^95";
    var resultArr = testResult.split("|");
    var html = "";
    
    $(resultArr).each(function(i) {
    	html = html + "<tr>";
        
        var personalResult = resultArr[i].split("^");
        $(personalResult).each(function(j) {
        	html = html + "<td>" + personalResult[j] + "</td>";
        });
        
        html = html + "</tr>";
    });
    
    $("#testResultTable").html(html);
});

각 인물들의 시험 점수를 일정한 패턴으로 받아와서 테이블을 만드는 예제이다.


소스에 대한 설명은 굳이 필요 없을 정도로 간단하지만 굳이 설명을 하자면 | 을 기준으로 각 인물의 정보를 나눠 for 문을 돌리고

다시 한 번 각 인물들의 정보를 ^ 을 기준으로 나눠 for 문을 돌려 테이블을 생성했다.


여기서 소스를 보면 알 수 있듯이 split 은 배열 내 객체를 꺼내올 때 HTML 객체로 리턴해주기 때문에 $( ) 를 붙여줘야만 

제이쿼리 객체로 인식을 해서 제이쿼리 함수인 each 나 다른 함수들을 사용할 수 있게 되므로 주의하도록 하자.


이번에는 반대로 join 을 사용하여 위의 결과로 나온 데이터들을 한 줄로 연결해보도록 하자.

$(document).ready(function() {
	var tableRow = $("#testResultTable > tbody > tr");
    var resultArr = [];

    tableRow.each(function(i) {
    	var tdData = $(tableRow[i]).children();
		var tdArr = [];

		tdData.each(function(j) {
        	tdArr.push($(tdData[j]).text());
        });
        
        resultArr.push(tdArr.join("^"));
    });
    
    alert(resultArr.join("|"));
});

세종대왕90
이순신78
장영실100
김정호98
신사임당95

위의 소스 중 설명하지 않은 새로운 함수들을 약간 짚고 넘어가자면,


children() 함수는 해당 엘리먼트의 하위 엘리먼트(자식 노드) 들을 제이쿼리 배열로 리턴해주는데

split() 함수와 마찬가지로 배열에서 꺼내올 때는 HTML 객체를 리턴해주기 때문에 제이쿼리 함수를 사용하기 위해서 $() 를 붙였다.


그리고 나중에 또 설명하겠지만 push() 함수는 배열의 제일 마지막에 값을 추가해주는 함수다.

반대로 배열의 제일 앞에 값을 추가해주는 함수로는 unshift() 가 있다. 끝.

댓글