Sort words inside html tags ignoring them

Question

I have some buttons on my web page which are looking like this:

<button>Apple</button>
<button>Dog</button>
<button>Text</button>
<button>Boy</button>
<button class='whatNot'>Text</button>
<button class='smth whatNot'>Applepie</button>
<button class='whatNot'>Doge is barking</button>
<button class='smth'>Such a doge</button>
<button class='smth whatNot'>Wow!</button>
<button class='whatNot smth'>Pure delicious</button>
<button>Peach</button>
<button>Trip</button>

Now I want to sort these buttons in alphabetical order without loosing tags and classes. I thought about making that in js: adding all button's names in array and then sort it. But how will I restore their classes afterwards? So, essentially, I just want to sort lines by words inside tags , but to not lose classes of each button during the sorting. Hope, I was clear enough.

Similar question with an accepted answer: http://stackoverflow.com/questions/29734337/javascript-obtain-nodelist-convert-nodelist-to-an-array-sort-the-array-and It should help. — Nekomajin42, Feb 04 '17 at 18:25

score 1 · Accepted Answer · edited May 23 '17 at 10:29

Possible solution:

1) Load all buttons into an array of objects, ie:

[
    ...
    {
        sortValue: 'Text',
        html: '<button class='whatNot'>Text</button>'
    },
    {
        sortValue: 'Applepie',
        html: '<button class='smth whatNot'>Applepie</button>'
    },
    ...
]

2) Sort this object by 'sortValue' field
3) Remove buttons from page
4) Append buttons from sorted object ('html' field)

Sort words inside html tags ignoring them

1 Answers1