post list.

kakao adfit

2014년 9월 29일 월요일

[JavaScript]카멜케이스 포매터 자바스크립트

THIS_IS_COLUMN_NAME 형태의 문자를 thisIsColumnName 의 형태로 바꿔준다.
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
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#input").click(function(){
    $("#input").val("");
  });
  $("#btn").click(function(){
    var input = $("#input").val();
    var patt = /([A-Za-z]+_)/g;
    var array = input.match(patt);
    var output = "";
    for(var i=0; i<array.length; i++){
        array[i] = array[i].toLowerCase();
        if(i==0){
            output += array[i].substring(0, array[i].length-1);
        }else{
            output += array[i].substring(0, 1).toUpperCase() +
                      array[i].substring(1, array[i].length-1);
        }
    } // end of forloop
    patt = /(_[A-Z]+)/g;
    array = input.match(patt);
    var last = array[array.length-1].toLowerCase();
    output += last.substring(1, 2).toUpperCase() +
              last.substring(2, last.length);
    $("#output").val(output);
  });
});
function enter(){
 if(window.event.keyCode == 13)
  $("#btn").click();
}
function leave(){
 $("#btn").click();
}
</script>
</head>
<body>
<div>
   <input type="text" id="input" value="TYPE_THIS_KIND" onkeypress="enter()" onmouseout="leave()"/>
   <input type="text" id="output" value=""/>
</div>
<div>
   <button id="btn" name="btn" style="border:1px solid #ddd;background:white;">transformation</button>
</div>
<textarea rows="25" cols="50">tooltip!
input click  => input clear
input leave  => transforming input
input enter  => transforming input
button click => transforming input</textarea>
</body>
</html>

댓글 없음 :

댓글 쓰기