1+ <!doctype html>
2+ < html lang ="ja ">
3+
4+ < head >
5+ < meta charset ="utf-8 " />
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < link rel ="stylesheet " href ="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css ">
8+ < style >
9+ textarea {
10+ font-family : monospace;
11+ }
12+ </ style >
13+ </ head >
14+
15+ < body >
16+ < h1 > string 👉 byte array</ h1 >
17+ < label >
18+ < input id ="cast " type ="checkbox " checked >
19+ byteへのキャストを行う
20+ </ label >
21+ < textarea id ="src " placeholder ="Hello! "> </ textarea >
22+ 👇
23+ < textarea id ="dst " readonly
24+ placeholder ="{(byte) 'H', (byte) 'e', (byte) 'l', (byte) 'l', (byte) 'o', (byte) '!'} "> </ textarea >
25+ < button id ="copy "> コピー</ button >
26+
27+ < script >
28+ window . addEventListener ( "load" , ( ) => {
29+ const cast = document . getElementById ( "cast" ) ;
30+ const src = document . getElementById ( "src" ) ;
31+ const dst = document . getElementById ( "dst" ) ;
32+ const copy = document . getElementById ( "copy" ) ;
33+
34+ const convert = ( ) => {
35+ let prefix = '' ;
36+ if ( cast . checked ) {
37+ prefix = "(byte) " ;
38+ }
39+ if ( src . value === "" ) {
40+ dst . value = "" ;
41+ } else {
42+ dst . value = "{" + [ ...src . value ] . map ( ( char ) => `${ prefix } ${ char === "\n" ? "\\n" : char } ) . join ( ", " ) + "}" ;
43+ }
44+ } ;
45+
46+ cast . addEventListener ( "input" , ( ) => {
47+ convert ( ) ;
48+ if ( cast . checked ) {
49+ dst . placeholder = "{(byte) 'H', (byte) 'e', (byte) 'l', (byte) 'l', (byte) 'o', (byte) '!'}" ;
50+ } else {
51+ dst . placeholder = "{'H', 'e', 'l', 'l', 'o', '!'}" ;
52+ }
53+ } ) ;
54+
55+ src . addEventListener ( "input" , ( ) => convert ( ) ) ;
56+
57+ copy . addEventListener ( "click" , ( ) => {
58+ dst . select ( ) ;
59+ document . execCommand ( "copy" ) ;
60+ src . focus ( ) ;
61+ } ) ;
62+
63+ src . focus ( ) ;
64+ } ) ;
65+ </ script >
66+ </ body >
67+
68+ </ html >
0 commit comments