'TIP & IDEA' 카테고리의 글 목록

TIP & IDEA

URL encode/Decode html 소스입니다.

2023. 4. 9. 00:40

<!DOCTYPE html>

<html>

<head>

<title>URL Encoding/Decoding</title>

<style>

.container {

max-width: 600px;

margin-top: 2rem;

padding: 2rem;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

.result-text {

color: #444;

background-color: #f2f2f2;

}

</style>

</head>

<body>

<h1 class="text-center mb-4">URL Encoding/Decoding</h1>

<label for="input-textarea">Enter URL:</label>

</div>

<button id="encode-button" class="btn btn-primary btn-block" onclick="encode()">Encode</button>

<button id="decode-button" class="btn btn-secondary btn-block" onclick="decode()">Decode</button>

</div>

<label for="output-textarea" class="font-weight-bold">Result:</label>

</div>

</div>

function encode() {

const input = document.getElementById("input-textarea").value;

const output = encodeURIComponent(input);

document.getElementById("output-textarea").value = output;

}

function decode() {

const input = document.getElementById("input-textarea").value;

const output = decodeURIComponent(input);

document.getElementById("output-textarea").value = output;

}

function copyResult() {

const outputTextarea = document.getElementById("output-textarea");

outputTextarea.select();

outputTextarea.setSelectionRange(0, 99999); // For mobile devices

document.execCommand("copy");

alert("Result copied to clipboard.");

}

</script>

</body>

</html>

'TIP & IDEA > VanillaJS' 카테고리의 다른 글

JavaScript 배열에서 유니크한 값 추출 & Object배열에서 유니크한 값 추출 (0)	2022.06.26
정규표현식 Utills ( 콤마찍기, 콤마빼기, 숫자만입력, 하이픈제거, 전화전호 하이픈 생성, 주민등록번호, 사업자등록번호 ) (0)	2021.05.18

JavaScript 배열에서 유니크한 값 추출 & Object배열에서 유니크한 값 추출

2022. 6. 26. 23:48

1. 배열에서 유니크 한 값 추출

let numbers = [1,2,3,3,4,4,5,5,6];

// 배열에서 유니크한 값 추출
let uniqueNumbers = numbers.filter((item, index, array) => {
return array.indexOf(item) === index;
});

console.log(uniqueNumbers);

결과 [1,2,3,4,5,6]

2. Object 배열에서 유니크한 값 추출

결과 [{name:'찌끼찌기', age: '20'}, {name:'차차', age: '24'}, {name:'붐붐', age: '25'}]

※ Code Tip

i.age === item.age 이부분을 i.name === item.name 처럼 수정/응용하여 사용하시면 됩니다.

Note Page 2 - End

'TIP & IDEA > VanillaJS' 카테고리의 다른 글

URL encode/Decode html 소스입니다. (0)	2023.04.09
정규표현식 Utills ( 콤마찍기, 콤마빼기, 숫자만입력, 하이픈제거, 전화전호 하이픈 생성, 주민등록번호, 사업자등록번호 ) (0)	2021.05.18

정규표현식 Utills ( 콤마찍기, 콤마빼기, 숫자만입력, 하이픈제거, 전화전호 하이픈 생성, 주민등록번호, 사업자등록번호 )

2021. 5. 18. 12:49

가끔 필요하지만 막상 쓰려보면 없는 정규표현식 !! 정리겸 모아 보겠습니다.

1. 콤마찍기

var numberWithComma = function(x) {

return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");

}

2. 콤마빼기

var replaceComma = function(x) {

return x.toString().replace(/,/g,"");

}

3. 숫자만입력

var onlyNumber = function(x) {

return x.toString().replace(/[^-0-9]/gi, '');

}

4. 하이픈제거

var replaceHyphen = function(x) {

return x.toString().replace(/-/gi, "");

}

5. 전화전호 하이픈 생성

var phoneHyphen = function(x) {

return x.toString().replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");

}

6. 주민등록번호

var juminHyphen = function(x) {

return x.toString().replace(/(\d{6})(\d{7})/,"$1-$2");

}

7. 사업자등록번호

var employerNumHyphen = function(x) {

return x.toString().replace(/(\d{3})(\d{3})(\d{4})/,"$1-$2-$3");

}

요 페이지는 시간나는 대로 무한정 추가 하도록 하겠습니다. ^^

Note Page 1 - End

'TIP & IDEA > VanillaJS' 카테고리의 다른 글

URL encode/Decode html 소스입니다. (0)	2023.04.09
JavaScript 배열에서 유니크한 값 추출 & Object배열에서 유니크한 값 추출 (0)	2022.06.26