Sort array of HTML based on output

Question

So I have an array of HTML links;

[
    "<a href=\"...\" target=\"_blank\">foo</a>",
    "<a href=\"...\" target=\"_blank\">apple</a>",
    "<a href=\"...\" target=\"_blank\">cucumber</a>"
]

And I want to sort it based on the user-facing output of it (i.e. the a tag's content);

[
    "<a href=\"...\" target=\"_blank\">apple</a>",
    "<a href=\"...\" target=\"_blank\">cucumber</a>",
    "<a href=\"...\" target=\"_blank\">foo</a>"
]

I imagine I'd have to strip the HTML tags and then .sort() that, but I have no idea how to then reconcile that with the original array. How do I do this?

Are you using jQuery or looking for vanilla Javascript solution? — haim770, Jul 06 '14 at 06:53

score 5 · Accepted Answer · edited May 23 '17 at 12:05

You can use a DOMParser to parse the HTML and get the content of the tags.

By not using a regex, the markup can be anything as long as the selectors match, which is usually what you want as regex isn't really capable of parsing HTML.

Then use localeCompare to compare the strings, this avoids issues with case sensitivity and special characters that you would have with < or >

arr.sort(function(a,b) {
    var docA = new DOMParser().parseFromString(a, "text/html");
    var docB = new DOMParser().parseFromString(b, "text/html");
    var txtA = docA.querySelector('a').innerHTML;
    var txtB = docB.querySelector('a').innerHTML;

    return txtA.localeCompare(txtB);
});

FIDDLE

score 3 · Answer 2 · answered Jul 06 '14 at 06:53

You can use regex and a comparison function to easily do this.

var arr = [
    "<a href=\"...\" target=\"_blank\">foo</a>",
    "<a href=\"...\" target=\"_blank\">apple</a>",
    "<a href=\"...\" target=\"_blank\">cucumber</a>"
]

function compFunc(a,b){
   return a.match(/>(.*)</)[1] > b.match(/>(.*)</)[1];
}

console.log(arr.sort(compFunc))

fiddle

The regex will match anything between the closing > and the following opening < (need to ensure what's between them doesn't contain those chars), and the parentheses around (.*) mean it's a capture group and in the array returned from .match() will have the contents of that capture group (the string we want) as the second element.

+1 - Didn't see your answer when posting mine! Wouldn't have posted the duplicate. — techfoobar, Jul 06 '14 at 06:57

score 2 · Answer 3 · edited May 23 '17 at 11:57

2

You pass sortfunction parameter to sort method:

var arr = [
    "<a href=\"...\" target=\"_blank\">foo</a>",
    "<a href=\"...\" target=\"_blank\">apple</a>",
    "<a href=\"...\" target=\"_blank\">cucumber</a>"
];

var sorted = arr.sort(function(a, b) {
    a = strip(a);
    b = strip(b)
    return a.localCompare(b);
}

Here's how you do the strip: Strip HTML from Text JavaScript

edited May 23 '17 at 11:57

Community

1
1

answered Jul 06 '14 at 06:56

buff

2,063
10
16

Sort array of HTML based on output

3 Answers3