10 đoạn code Javascript hữu ích • yuran1811 blog

1. 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);
};

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

Copy bất kì văn bản nào vào bàn phím, hỗ trợ cả IE11.

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. Sao chép ảnh

Chỉ hỗ trợ ảnh với mime type là "image/png"

<img crossorigin="anonymous" src="https://picsum.photos/200" alt="" />
<button>Copy</button>

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';
};

5. CSS hex color ngẫu nhiên

const randomColor = () =>
  `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;

6. Định dạng số

const formatNumber = (num) => {
  return Intl.NumberFormat('en-US', {
    notation: 'compact',
    maximumFractionDigits: 1,
  }).format(num);
};

7. 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', '');

8. Flatten deep array

// Dùng đệ quy
const flatten = (arr) =>
  arr.reduce(
    (acc, current) =>
      acc.concat(Array.isArray(current) ? flatten(current) : current),
    [],
  );

// Dùng Array.flat (không support IE)
const flatten = (arr) => arr.flat(Infinity);

9. 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';
  }
};

10. 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]
  }`;
};

Kết luận

Và đó là 10 code snippets, utility functions rất hữu ích mà bạn có thể áp dụng vào project của mình.