Tag Archives: Javascript

Natural sort in Javascript

Sorting strings naturally/numerically in Javascript is very simple. You just need to remember the existence of the Intl.Collator… which I keep forgetting…

You simply create one and use its compare function:

const collator = new Intl.Collator(undefined, {
    usage: 'sort',
    numeric: true

const simple = ['a1', 'a12', 'a2']
// => ['a1', 'a2', 'a12']

const objects = [{"id": "a1"}, {"id": "a12"}, {"id": "a2"}]
const by = (key) => (a, b) => collator.compare(a[key], b[key])
// => [{id: 'a1'}, {id: 'a2'}, {id: 'a12'}]

JavaScript: In-browser export to CSV

This function will turn an array of data into a CSV file and get the browser to “download” it. It should also be wrapping and escaping values properly and, because of the BOM, be read correctly when opened in e.g. Excel.

It’s written in TypeScript ("lib": ["ES2017", "DOM"]), but should be easy to “downgrade” to regular JS if needed…

type GetValue <T> = <I extends T>(item: I) => any;
type FieldName <T> = keyof T;

export interface Columns<T> {
  [s: string]: FieldName<T> | GetValue<T>;

const ROW_SEPARATOR = '\r\n';
const UNICODE_BOM = '\uFEFF';

const wrapValue = (value: string) => `"${value}"`;
const escapeValue = (value: string) => (value || '').replace(/"/, '""');

const toHeaderRow = <T> (columns: Columns<T>) => Object

const toRow = <T> (columns: Columns<T>, item: T) => Object
  .map(field => typeof field === 'function' ? field(item) : item[field])

export const exportToCsv = function <T> (data: T[], columns: Columns<T>, filename: string): void {
  const rows = [];


  for (const item of data) {
    rows.push(toRow(columns, item));

  const csv = UNICODE_BOM + rows.join(ROW_SEPARATOR);
  const uri = `data:text/csv;charset=utf-8;header=present,${encodeURIComponent(csv)}`;

  const link = document.createElement('a');
  link.setAttribute('href', uri);
  link.setAttribute('download', filename);
  link.addEventListener('click', () => link.parentNode.removeChild(link));



const users: User[] = [{id: 1, name: 'Alice', isCool: true}, ...];
const columns: Columns<User> = {
  'Id': 'id',
  'Name': 'name',
  'Is cool': user => user.isCool ? 'Yes' : 'No',
exportToCsv(users, columns, 'users.csv');

jQuery: How to extract a tag from an HTML response

Making a website, and using ajax for some things. Sometimes things fail and return custom error pages. I made them to be helpful, but since you can only see them in the browser developer console, they were a bit of a hassle to look at.

To see what the error was much easier, I figured I could just parse the returned HTML, extract the message I knew was there, and insert it into the page that way.

And you’d think the following would work fine:

$(document).ajaxError(function(event, jqxhr, settings, error)
    // Find the message in the response HTML
    var m = $(jqxhr.responseText)

    // Except .find() doesn't find anything

    // And we replace our DOM with nothing

But… No… Apparently, since the response was a complete HTML page, i.e. including html, head and body tags, jQuery was getting a bit tricked up when trying to parse it. Actually not sure if it’s jQuery or native browser parsing behind that’s causing it, but where there’s a will, there’s a way:

$(document).ajaxError(function(event, jqxhr, settings, error)
    // Find the inner HTML of the body tag
    var body = /<body.*>([\s\S]+)<\/body>/

    // Parse the HTML
    body = $.parseHTML(body[1])

    // Append the HTML to a non-special root tag
    body = $('<output>').append(body);

    // And *now* we can finally find our message
    var message = body.find('#message');

    // And add it to our DOM