根据输出对HTML数组进行排序

Sort array of HTML based on output

本文关键字：排序 数组 HTML 输出      更新时间：2023-09-26

我有一个HTML链接数组;

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

我想根据它的面向用户的输出(即a标签的内容)对它进行排序;

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

我想我必须剥离HTML标签，然后.sort()，但我不知道如何与原始数组调和。我该怎么做呢?

可以使用DOMParser解析HTML并获得标记的内容。

通过不使用正则表达式，只要选择器匹配，标记可以是任何东西，这通常是您想要的，因为正则表达式并不真正能够解析HTML。

然后使用localeCompare来比较字符串，这可以避免<或>的大小写敏感和特殊字符问题

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);
});

小提琴

您可以使用正则表达式和比较函数轻松地完成此操作。

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

小提琴

regex将匹配关闭>和以下打开<之间的任何内容(需要确保它们之间不包含这些字符)，(.*)周围的括号意味着它是一个捕获组，并且在从.match()返回的数组中将有捕获组的内容(我们想要的字符串)作为第二个元素。

将sortfunction参数传递给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);
}
从Text JavaScript中删除HTML
相关文章：