[javascript] 단어(구분자) 단위 반응형 줄바꿈

 

얼마전 개발자 오픈채팅방에서

가변적인 너비의 div안에 DB에서 가져온 텍스트들을 넣는데

div의 너비가 바뀔때마다 자동으로 줄바꿈이 되어야 하는걸 만들어야 하는데

잘 모르겠다 라는 질문이 있었다.

간단하게 css로 줄바꾸면 되는거 아닌가 했는데

콤마(,) 로 구분되어진 단어들이고 단어안에 띄어쓰기도 들어가 있다고 한다.

즉 콤마로 구분되어진 단어들이 너비에 따라 자동으로 줄바꿈이 되어야 하며

단어들은 띄어쓰기가 포함되어 있고 폰트의 크기도 가변적으로 변할 수 있다고 한다.

 

재밌어 보여서 대충 구현을 해 보았다.

jsbin으로 구현해 보았으니

 

https://jsbin.com/tomojibaku/1/edit?js,output 

 

JS Bin

Sample of the bin:

jsbin.com

 

이 링크에 가서 확인을 하면 된다.

 

코드는

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="textContatiner" class="txt-container">
    
  </div>
</body>
</html>
 cs

 

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var data = "일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈,육번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈,일번놈, 이번노 오옴, 삼번 노오 오옴, 사번노오오옴, 오번놈, 칠버어언 놈";
setTxt();
 
// 너비가 바뀔때마다 셋팅을 해준다.
$( window ).resize(function() {  
setTxt();
});
 
 
 
function setTxt(){
    // 너비가 변할때마다 div컨테이너를 비워주고 다시 셋팅
  var container = $("#textContatiner");
  container.empty();
 
  var conW = container.width();
  var dataArr = data.split(",");
 
  // 폰트크기도 가변적으로 바뀔수 있기 때문에 1글자의 너비를 구한다.
  container.append($("<span id='test'>한</span>"));
  var oneW = $("#test").width()*2;
  $("#test").remove();
  
  var lineData = "";
  var subData = "";
  var lineNo = 0;
  var spId ="sp"+ lineNo;
  var sp = $("<span id='"+spId+"'></span>");
  container.append(sp);
  
 
  for (var i = 0; i <dataArr.length; i++) {
     subData = lineData;
     lineData = lineData+","+dataArr[i];
    sp.text(lineData);
    var spW = sp.width();
    if(spW > conW - oneW){
      sp.text(subData);
      sp.css("display","block");
      lineNo++;
      i--;
      spId ="sp"+ lineNo;
      sp = $("<span id='"+spId+"'></span>");
      container.append(sp);
      lineData = "";
    }
    console.log(spW);
  };
  
  
  
}
 cs

 

폰트가 바뀔수도 있으니 div안에 한글자를 넣어서 너비를 확인하고 클리어 시킨다음

콤마로 구분된것들을 하나씩 추가 하다가 일정 너비 이상이 되면

이전텍스트로 복원을 하고 새로운 span을 생성해 넣는 식이다.

더 깔끔하게 구현하려면 css도 좀 손봐야 하고

첫번째 문장에 들어가는 콤마 지우고 하면 쓸만할 것 같다.

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07

얼마전 회사에서 새로운 기능을 만들어서 배포 하였는데

 

현장 IE환경에서 특정 페이지가 구동이 안되는 현상을 발견 하였다.

무엇이 문제인가 하니

IE에서는 배열의 find를 지원하지 않았던것

그래서 찾은 해결방법이

<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find"></script>

 

를 추가 하는것이다.

 

IE에서 지원하지 않는 기능을 추가해주는 스크립트 이다.

 

역시 개발하면서 뭔가 불편하다 싶은게 있으면

 

누군가가 해결해 놓은 솔루션이 있기 마련이다.

 

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[javascript] 단어(구분자) 단위 반응형 줄바꿈  (1) 2022.06.06
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
1
2
3
4
5
list.sort(function(a, b) { // 오름차순
    return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
  });
 
 
 cs

 

배열안의 id값이나 name 순서대로 재정렬 할때 사용 하는 방법

 

 

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[javascript] 단어(구분자) 단위 반응형 줄바꿈  (1) 2022.06.06
[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var list = [{"name":"사과", "id":"a1"},{"name":"배", "id":"a2"},{"name":"사과", "id":"a1"},{"name":"바나나", "id":"a3"}......] ;
 
var resultArray = []; // 카운팅해서 반환할 결과값 배열
  list.map(item => {
    //for each item in arrayOfObjects check if the object exists in the resulting array
    if(resultArray.find(object => {
        if(object.Name === item.Name && object.id === item.id) {
            //if the object exists iterate times
            object.cnt++;
            return true;
            //if it does not return false
        } else {
            return false;
        }
    })){
    } else {
        //if the object does not exists push it to the resulting array and set the times count to 1
        item.cnt = 1;
        resultArray.push(item);
    }
  });
 
 
 cs

 

배열안에 중복된 객체를 제거하고 중복된 객체가 몇개인지 세는 방법.

 

 

 

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28

[제이쿼리] form의 내용을 한번에 오브젝트로 만들기



form 안의 input 데이터들을 ajax로 날려주거나 오브젝트로 만들어야 할때


하나하나 네임이나 id값으로 불러와서 만들기엔 너무나도 귀찮은 작업이다.


이걸 한번에 해결해 줄수 있는 방법에 대해서 알아보자



일단 제이쿼리 플러그인을 사용해야 한다



제이쿼리 시리얼라이즈 링크




사용 방법은


두가지가 있다


하나는 배열로 만들기 하나는 오브젝트로 만드는 방법






1. html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="yameaForm">
    <input name="input1">
    <input name="input2">
    <input name="input3">
    <input name="input4">
    <input name="input5">
    <input name="input6">
  </form> 
</body>
</html>
cs



2. js


1
2
3
4
5
6
7
8
9
function makeObject(){
var param = $("#yameForm").serializeObject();
console.log(param);
}
 
function makeArray(){
var param = $("#yameForm").serializeArray();
console.log(param);
}
cs



위와 같은 방법으로 만들면 된다


짱편함


개편함


짱짱맨임


저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26

[자바스크립트] 자바스크립트 다국어 적용 방법



1. 자바스크립트


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 언어팩 선언.
$.lang = {};
 
$.lang.ko = {
    0: '자바스크립트 다국어 처리.',
    1: '안녕하세요',
    2: '오늘은 금요일 입니다.',
    3: '불금을 즐겨 보아요.'
};
 
$.lang.en = {
    0: 'Javascript Language Localization.',
    1: 'Hello.',
    2: 'Today is Friday',
    3: 'Fire~!!'
};
    
$.lang.ja = {
    0: 'JavaScriptの言語',
    1: 'こんにちは',
    2: '今日は金曜日です。',
    3: 'ガンバレ~!!'
};
 
/**
* setLanguage 
* use $.lang[currentLanguage][languageNumber]
*/
function setLanguage(currentLanguage) {
  console.log('setLanguage', arguments);
  
  $('[data-langNum]').each(function() {
    var $this = $(this); 
    $this.html($.lang[currentLanguage][$this.data('langnum')]); 
  });    
}  
 
// 언어 변경
$('button').click(function() {
  var lang = $(this).data('lang');
  setLanguage(lang); 
});
cs





2. HTML


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
  <meta charset="utf-8">
  <title>자바스크립트 다국어 처리.</title>
</head>
<body>
  <div id="wrap">
    <h1 data-langNum="0">자바스크립트 다국어 처리</h1>
    <button data-lang="ko">한국어</button>
    <button data-lang="ja">일본어</button>
    <button data-lang="en">영어</button>
    <hr>
  
    <h2 data-langNum="1">안녕하세요</h2>
    <h2 data-langNum="2">오늘은 금요일 입니다.</h2>
    <h2 data-langNum="3">불금을 즐겨 보아요.</h2>
  </div>
</body>
</html>
cs





출처 : http://jsbin.com/losejo/edit?html,js,output

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13

자바스크립트로 YYYYMMDD 형식의 이번년도 달 일 구하는 방법



진짜 쉽지만 만들대마다 귀찮은 코드.


날짜형식은 20160227 이나 2016-02-17 같은 텍스트로 만드는 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
/*날짜 구하기*/
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1
    var day = date.getDate();
    if(month < 10){
        month = "0"+month;
    }
    if(day < 10){
        day = "0"+day;
    }
 
    var today = year+""+month+""+day;
cs


큰따옴표 안에 '-' 라든지 '/' 같은걸 넣어도 된다.


getMonth안에 +1을 하는 것은 데이트로 월정보를 가져오면


월이 0부터 시작하기 때문이다.

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
제이쿼리 foreach 사용하기  (1) 2016.06.15

개발할때마다 가장 귀찮았던 것 중 하나는 천단위마다 콤마를 찍어주는 것이었다.


처음엔 문자열로 변환하고 글자 개수를 세고 3개를 기준으로 앞뒤를 잘라서 분리하고


그사이에 콤마를 집어넣는 아주아주 귀찮은 방법을 사용했다가


정규식을 사용하여 아주아주 간편하게 천단위마다 콤마를 찍어줄수 있다는걸 알게 되었다.


로직은 굉장히 간단하다.


1
2
3
4
function numbeComma(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
 
cs


이게 끝이다.


그동안의 천단위 콤마찍는 귀찮음에서 한번에 해방되는 느낌이다.


예전에 인터넷 돌아다니다 발견했던건데


이거 만든 사람 상줘야 한다.


정규식이라는 개념을 만들어낸 사람도 참 대단하다. 스크립트에서도 그렇고 SQL에서도 그렇고


요즘 정규식이라는걸 참 유용히 잘 사용하고 있다.

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
제이쿼리 foreach 사용하기  (1) 2016.06.15
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.


append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌


특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을


알아 보도록 하자.



예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄


사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.


혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.



1
2
3
4
5
6
7
8
<select id="select1" onchange="itemChange()">
<option>키보드</option>
<option>마우스</option>
<option></option>
</select>
 
<select id="select2">
</select>
cs


먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때


1번 셀렉트 박스의 값이 바뀔때마다 2번 셀렉트 박스의 옵션들이 바뀌도록 만들어 보자




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function itemChange(){
 
var keyboard = ["갈축","청축","적축"];
var mouse = ["광마우스","유선마우스","비싼마우스","미키마우스"];
var monitor = ["17인치","22인치","24인치","26인치"];
 
var selectItem = $("#select1").val();
 
var changeItem;
 
if(selectItem == "키보드"){
changeItem = keyboard;
}
else if(selectItem == "마우스"){
changeItem = mouse;
}
else if(selectItem == "모니터"){
changeItem =  monitor;
}
 
$('#select2').empty();
 
for(var count = 0; count < changeItem.size(); count++){                
                var option = $("<option>"+changeItem[count]+"</option>");
                $('#select2').append(option);
            }
 
}

cs

   


여기서 주목할 것은


empty()와 append 이다



기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고


append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.


이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.







저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
제이쿼리 foreach 사용하기  (1) 2016.06.15
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01

제이쿼리에서 foreach문 사용하는 방법


1. 배열 사용


$.each() 함수를 사용하여 배열을 반복문 형태로 사용할 수가 있다.


ex)1


1
2
3
4
5
6
7
8
9
10
11
// 예제1
$.each([0,8,4,10], function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
 
//예제2
var arr = [0,8,4,10];
 
$.each(arr, function(index, value) { 
      console.log(index + ':값 = ' + value); 
    });
cs



예제 1번과 2번을 실행하면


콘솔창엔 다음과 같은 결과가 동일하게  나온다


1
2
3
4
0:값 = 0
1:값 = 8
2:값 = 4
3:값 = 10
cs





2. 맵 사용


맵형식을 가지고 있는 데이터를 사용할땐 key와 value의 쌍으로 사용한다.


ex)2


1
2
3
4
5
6
7
8
9
10
11
var map = { 
  'name': 'yamea', 
  'age': '99' 
}; 
$.each(map, function(key, value) { 
  console.log(key + ': ' + value); 
});
 
// 결과
name: yamea
age: 99
cs




3. json 형식 데이터 사용


조금 더 나아가서 우리가 흔하게 사용하는 여러개의 오브젝트들이 담긴 배열을 사용할땐 조금만 응용을 하면 된다.


ex)3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var map1 = { 
          'name': 'yamea', 
          'age': '10' 
        };
var map2 = { 
          'name': 'yamea2', 
          'age': '20' 
        };
var map3 = { 
          'name': 'yamea3', 
          'age': '30' 
        };
var arr = [map1, map2, map3];
 
        $.each(map, function(key, value) { 
          console.log("이름 = "+ value.name); 
        });
        
        // 결과값
        
        이름 = yamea
        이름 = yamea2
        이름 = yamea3
cs


위와 같은 방식으로 사용을 할 수 있다.


아주 간단한 방법으로 긴 for문을 사용하지 않고도 간단하게 사용할 수 있는 방법이다.

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01
[JavaScript] 제이쿼리로 레이어팝업 만들기  (0) 2015.06.23

+ Recent posts

티스토리툴바