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

Question

我的网页上有一些按钮，它们看起来像这样：

<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>

现在我想在不丢失标签和类的情况下按字母顺序对这些按钮进行排序。 我想在 js 中做到这一点：将所有按钮的名称添加到数组中，然后对其进行排序。 但是之后我将如何恢复他们的课程？ 所以，本质上，我只想按标签内的单词对行进行排序，但在排序过程中不要丢失每个按钮的类。 希望，我已经足够清楚了。

Answer 1

可能的解决方案：

1）将所有按钮加载到一个对象数组中，即：

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

2） 按“sortValue”字段对此对象进行排序
3）从页面中删除按钮
4）从排序对象（'html'字段）附加按钮