Question

所以我有一系列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()，但我不知道如何将其与原始数组进行协调。我该怎么做？

Answer 1

您可以使用DOMParser来解析HTML并获取代码的内容。

通过不使用正则表达式，只要选择器匹配，标记就可以是任何东西，这通常是你想要的正则表达式isn't really capable of parsing 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);
});

FIDDLE

Answer 2

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

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

正则表达式将匹配结束>和后面的开头<之间的任何内容（需要确保它们之间的内容不包含这些字符），并且(.*)周围的括号表示它是一个捕获组，并且从.match()返回的数组中将该捕获组的内容（我们想要的字符串）作为第二个元素。

Answer 3

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

以下是您如何进行剥离：Strip HTML from Text JavaScript

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

3 个答案: