根据输出对HTML数组排序

所以我有一个HTML链接数组;根据输出对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()，但我不知道如何来调和，然后与原始数组。我该怎么做呢？

来源

2014-07-06 Emphram Stavanger

你使用jQuery或寻找vanilla Javascript解决方案吗？ – haim770

您可以使用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

来源

2014-07-06 06:56:09 adeneo

你可以使用正则表达式和比较函数来轻松地做到这一点。

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()返回的数组中将具有该捕获组的内容（我们想要的字符串）作为第二个元素。

来源

2014-07-06 06:53:57 Mosho

+1 - 发布我的时候没有看到您的答案！不会发布重复。 – techfoobar

+1正则表达式解决方案 –

这是比较好的 - />(.+?)

您传递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

来源

2014-07-06 06:56:17 buff

根据输出对HTML数组排序

回答

相关问题