对 html 标签内的单词进行排序忽略它们

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.

Answer 1

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)