1. Sao chép ảnh

const copyImageToClipboard = 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 (await fetch(dataURL)).blob();
  navigator.clipboard.write([
    new ClipboardItem({
      "image/png": blob,
    }),
  ]);
};

<img crossorigin="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

const copyToClipboard = (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();
      return new Promise((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"

const forceDownloadFile = (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

const calculateElapsedTime = (timeCreated) => {
  const created = new Date(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ố

const formatNumber = (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(new RegExp("b", "g"), "");

// Split and join
str.split("b").join("");

// Replace All (modern browser)
str.replaceAll("b", "");

// While loop
while (str.includes("b")) str = str.replace("b", "");

7. Format file size

const formatFileSize = (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

const formatVideoTime = (seconds) => {
  try {
    const date = new Date(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"