Một số đoạn code hữu ích cho JS developer

1. Sao chép ảnh constcopyImageToClipboard=async(imageElement)=>{let canvas = document.createElement("canvas"); canvas.width = imageElement.width; canvas.height = imageElement.height;let ctx = canvas.getContext("2d"); ctx.drawImage(imageElement,0,0);const dataURL = canvas.toDataURL();const blob =await(awaitfetch(dataURL)).blob(); navigator.clipboard.write([newClipboardItem({"image/png": blob,}),]);}; <imgcrossorigin="anonymous"src="https://picsum.photos/200"alt=""><button>Copy</button> document.querySelector("button").onclick=()=>{copyImageToClipboard(document.querySelector("img"))} 2. Sao chép văn bản constcopyToClipboard=(text)=>{try{if(navigator.clipboard && window.isSecureContext){return navigator.clipboard.writeText(text);}else{let textArea = document.createElement("textarea"); textArea.value = text; textArea.style.position ="fixed"; textArea.style.left ="-999999px"; textArea.style.top ="-999999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select();returnnewPromise((res, rej)=>{ document.execCommand("copy")?res():rej(); textArea.remove();});}}catch(error){ console.error(error);}};

1. Sao chép ảnh

constcopyImageToClipboard=async(imageElement)=>{let canvas = document.createElement("canvas");
  canvas.width = imageElement.width;
  canvas.height = imageElement.height;let ctx = canvas.getContext("2d");
  ctx.drawImage(imageElement,0,0);const dataURL = canvas.toDataURL();const blob =await(awaitfetch(dataURL)).blob();
  navigator.clipboard.write([newClipboardItem({"image/png": blob,}),]);};
<imgcrossorigin="anonymous"src="https://picsum.photos/200"alt=""><button>Copy</button>
document.querySelector("button").onclick=()=>{copyImageToClipboard(document.querySelector("img"))}

2. Sao chép văn bản

constcopyToClipboard=(text)=>{try{if(navigator.clipboard && window.isSecureContext){return navigator.clipboard.writeText(text);}else{let textArea = document.createElement("textarea");
      textArea.value = text;
      textArea.style.position ="fixed";
      textArea.style.left ="-999999px";
      textArea.style.top ="-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();returnnewPromise((res, rej)=>{
        document.execCommand("copy")?res():rej();
        textArea.remove();});}}catch(error){
    console.error(error);}};

3. Force download file

Tải file với thẻ a.
Không hoạt động nếu file được trả về không có header “Content-Disposition: attachment”

constforceDownloadFile=(url)=>{const anchor = document.createElement("a");
  anchor.href = url;
  anchor.download = url;
  anchor.style.display ="none";
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);};

4. Tính khoảng thời gian đã qua

constcalculateElapsedTime=(timeCreated)=>{const created =newDate(timeCreated).getTime();let periods ={
    year:365*30*24*60*60*1000,
    month:30*24*60*60*1000,
    week:7*24*60*60*1000,
    day:24*60*60*1000,
    hour:60*60*1000,
    minute:60*1000,};let diff = Date.now()- created;for(const key in periods){if(diff >= periods[key]){let result = Math.floor(diff / periods[key]);return`${result}${(result ===1? key : key +"s")} ago`;}}return"Just now";};calculateElapsedTime("2022-05-20T09:03:20.229Z")// output: 2 minutes ago

5. Định dạng số

constformatNumber=(num)=>{return Intl.NumberFormat('en-US',{
    notation:"compact",
    maximumFractionDigits:1}).format(num);}formatNumber(389210)// output: '389.2K'

6. Thay thế tất cả các ký tự trong chuỗi

let str ="ababaa";// Replace "b" with ""// Output "aaaa"// Regex
str.replace(/b/g,"");// Better regex
str.replace(newRegExp("b","g"),"");// Split and join
str.split("b").join("");// Replace All (modern browser)
str.replaceAll("b","");// While loopwhile(str.includes("b")) str = str.replace("b","");

7. Format file size

constformatFileSize=(size)=>{let i = Math.floor(Math.log(size)/ Math.log(1024));return`${(size / Math.pow(1024, i)).toFixed(1)}${["B","KB","MB","GB","TB"][i]}`;};formatFileSize(32143332)// output: "30.7 MB"formatFileSize(8904869085)// output: "8.3 GB"

8. Format video time

constformatVideoTime=(seconds)=>{try{const date =newDate(0);
    date.setSeconds(seconds);const time = date.toISOString().slice(11,19);const result = time.startsWith("00:0")? time.slice(4): time.startsWith("00")? time.slice(3): time.length ===8&& time.startsWith("0")? time.slice(1): time;return result;}catch(error){return"0:00";}};formatVideoTime(20)// output: "0:20"formatVideoTime(135)// output: "2:15"formatVideoTime(3214)// output: "53:34"formatVideoTime(32143)// output: "8:55:43"

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ