출력을 기준으로 HTML 배열 정렬

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

나는 그때 그때 원래의 배열이 화해하는 방법을 모른다, 그러나 .sort() HTML 태그 등을 제거해야 할 것 상상한다. 어떻게해야합니까?

Answer 1

DOMParser을 사용하여 HTML을 구문 분석하고 태그의 내용을 가져올 수 있습니다.

정규식을 사용하지 않으면 선택자가 일치하는 한 마크 업을 사용할 수 있습니다. 정규식은 보통 정규식 isn't really capable of parsing HTML으로 원하는 것입니다.

그런 다음이 당신이 < 또는 >

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

regex와 비교 함수를 사용하면 쉽게이 작업을 수행 할 수 있습니다.

fiddle

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

닫는 > 다음과 같은 개방 < (그 문자를 포함하지 않는 것 사이의 확인 필요), 그리고 (.*) 주위의 괄호 사이에 아무 것도 일치 정규식은 캡처 뜻 group 및 .match()에서 반환 된 배열에서 두 번째 요소로 캡처 그룹 (원하는 문자열)의 내용을 갖게됩니다.

Answer 3

당신은 패스했을 경우 감도와 특수 문자 문제를 피할 수, 문자열을 비교하는 localeCompare를 사용 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