JavaScript/코드

[JS] 특수문자 제거 / 체크

모든 특수문자를 체크하는 정규식 const reg = /[^a-zA-Z0-9ㄱ-힣]/g; '가나$sW2^&d!_ㅎ^@'.replace(reg, ''); // '가나sW2dㅎ' [^]를 이용해서 위 조건들을 묶어 이와 반대되는 문자를 찾아내는 정규식입니다.. 숫자, 영어, 한글에 해당하지 않는 문자는 특수문자라고 가정을 하고 걸러주는 방식을 사용해봤습니다. 해당 정규식을 활용한 코드 See the Pen REGEX special string by hyukson (@hyukson) on CodePen.

[JS] select에서 선택한 값 가져오기

코드 빨강색 노랑색 초록색 const changeValue = (target) => { // 선택한 option의 value 값 console.log(target.value); // option의 text 값 console.log(target.options[target.selectedIndex].text); } 코드 설명 See the Pen select 선택한 값 by bolgang13 (@bolgang13) on CodePen. select 요소에서 value 키워드로 접근, value 값을 가져올 수 있습니다. 선택한 text 값은 해당 select 요소에서 현재 선택한 option의 인덱스 값으로 가져올 수 있고, 해당 값에서 option 목록을 지정해 해당 text 값을 가져올 수 있습니다.

[JS] 배열 특정 값 포함 여부, 중복체크 (includes, indexOf, some, every)

includes const array = [1, 2, 3, 4, 5]; array.includes(6); // false array.includes(3); // true array.includes(3, 3); // false includes 메서드는 배열이 특정 요소의 포함 여부를 판별합니다. 첫 인자값에는 탐색할 요소를 보내며 두번째 인자값에는 탐색을 시작할 위치를 보냅니다. (기본 값 0) indexOf const array = [1, 2, 3, 4, 5]; array.indexOf(6); // -1 array.indexOf(3); // 2 array.indexOf(3, 3); // -1 indexOf 메서드는 배열에서 특정 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환..

[JS] textarea 줄바꿈 갯수

코드 const rowsCount = (target) => { // 개수 console.log( target.value.split("\n").length - 1 ); } Enter를 입력 시 줄바꿈 되는 개행(\n)을 기준으로 잘라 개수를 셀 수 있습니다.

[JS] 다중 배열 하나의 배열로 묶기 (flat)

flat 메서드 const newArr = arr.flat([depth]) flat 메서드는 모든 배열 요소를 지정한 깊이까지 이어 붙인 새로운 배열을 생성하는 메서드입니다. 빈 요소가 있으면 무시하며 depth에 따라 합치는 정도를 정할 수도 있습니다. (기본은 1입니다.) [1, 2, [3, 4]].flat(); // [1, 2, 3, 4] [1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, 3, 4, [5, 6]] [1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6] [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]].flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 어디서 ..

[JS] 팝업창 가운데에 위치시키기

코드 const width = 600; const height = 600; let left = (document.body.offsetWidth / 2) - (width / 2); let tops = (document.body.offsetHeight / 2) - (height / 2); left += window.screenLeft; const popup = window.open('/', 'popup', `width=${width}, height=${height}, left=${left}, top=${tops}`); 코드 설명 해당 코드는 screen.width을 사용하지 않습니다. 그 이유는 듀얼 모니터 때문입니다. screen.width을 사용 시 메인 모니터를 기준 값이기에 서브 모니터에서 페이지를 ..

[JS] 전화번호 자동 하이픈(-) 정규식

첫 번째 코드 const phone = '01012345678'; phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // '010-1234-5678' 00-000-0000 또는 000-0000-0000 전화번호를 (2, 3) - (3, 4) - (4) 자리에 숫자 그룹을 지어 묶어줍니다. replace() 메서드로 각 그룹($1, $2, $3)을 순서대로 배치하고 사이에 하이픈을 추가시켜 하이픈이 추가된 전화번호를 완성시켜 줍니다. const phone = "010-12345678"; phone .replace(/[^0-9]/g, '') // 숫자를 제외한 모든 문자 제거 .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-..

[JS] 아주 큰 숫자 한계 처리

문제점 자바스크립트의 기본 자료형의 수는 한계점이 존재합니다. Number.MAX_SAFE_INTEGER의 값보다 큰 값은 정확하지 않을 때가 많습니다. 해결방법 BigInt 타입의 값을 만들어 계산하는 방법으로 해결할 수 있습니다. 숫자 뒤에 BigInt을 호출하거나 n을 붙여 값을 만들 수 있습니다. 이를 사용하여 기본 자료형의 수로 연산하여 나온 Infinify의 한계를 넘을 수 있습니다. 하지만 주의해야 할 점은 BigInt형의 값은 BigInt형의 값만으로 연산할 수 있으며 기본 숫자형의 값으로는 연산할 수 없습니다. 그 후 toString 메서드를 이용하여 맨뒤에 붙어있는 n을 제거한 문자열로 바꿀 수 있습니다. 참고사이트 https://developer.mozilla.org/ko/docs/W..

[JS] 배열 특정 값 찾기 ( find, findIndex, filter )

find const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // callback(element, index, array) array.find(v => v > 5); // 6 find 메서드는 해당 조건에 만족하는 첫 번째 요소의 값을 반환하며 만족하지 않으면 undefined를 반환합니다. const array = [{name: 'red'}, {name: 'green'}, {name: 'yellow'}]; array.find(v => v.name === 'green'); // {name: 'green'}; find 메서드는 object가 담겨있는 배열에서도 유용하게 사용 가능합니다. findIndex const array = [1, 2, 3, 4, 5, 6, 7, 8, ..

[JS] a부터 z까지 출력하기

a부터 z까지의 문자를 쉽게 만드는 방법은 유니코드를 사용하여 숫자를 문자로 바꾸는 방법을 사용하는 것입니다. 코드 let str = ''; for (let i = 97; i String.fromCharCode(i + 97)).join(""); 코드 해설 fromCharCode 메서드를 사용하여 97 (a)부터 122 (z)까지의 UTF-16를 이용하여 생성하는 코드입니다.

[JS] 배열 랜덤하게 섞기

첫 번째 코드 [1, 2, 3, 4, 5].sort(() => Math.random() - 0.5); Math.random 메서드는 0부터 1까지의 난수를 반환합니다. 이 때 0.5는 반환되는 난수의 중간 값입니다. 이를 이용하여 sort 메서드로 매번 랜덤 한 값으로 정렬시켜 섞어줍니다. 두 번째 코드 const getRandom = () => Math.floor(Math.random() * tmpArray.length); const tmpArray = [1, 2, 3, 4, 5]; const array = [...tmpArray].map(_ => tmpArray.splice(getRandom(), 1)[0]); console.log(array); tmpArray 배열에서 값을 랜덤 하게 하나씩 뽑아 ..

[JS] 랜덤 RGB 색 만들기

코드const getRandomRGB = () => `rgb( ${new Array(3).fill().map(v => Math.random() * 255).join(", ")} )`; 각각 다른 0부터 255사이의 랜덤한 값을 배열 3개에 담아 반환시켜주는 함수 코드입니다. 관련 있는 글https://wezkit.com/random-color 랜덤 색상 생성 - wezkit랜덤한 HEX / RGB / HSL 색깔 코드를 생성할 수 있습니다.www.wezkit.com