让 javascript 列出页面上所有内部 href=# 的列表

Question

有没有办法让 javascript 在页面上创建一个包含所有内部 href=# 的数组？

这个想法是有一个下拉菜单，其中包含指向页面上所有锚点的链接。

Answer 1

根据您需要的浏览器支持，您可以这样做：

var elems = document.getElementsByTagName( 'a' );

var hashes = Array.prototype.map.call( elems, function( v, i ) {
    return v.hash;
}).filter( function( v, i, a ) { return !!v && a.indexOf( v ) === i; });

您可以使用 MDN 提供的填充程序获得对旧浏览器的支持。

• map()^[docs]
• filter()^[docs]
• indexOf()^[docs]

---

在您的评论中，您指出您想要name 而不是href。

您可以这样做，它会自动带来更好的浏览器支持，但您仍然希望获得对 indexOf() 的支持。

var elems = document.getElementsByTagName( 'a' );

var names = [];

for( var i = 0, len = elems.length; i < len; i++ ) {
    if( elems[i].name && names.indexOf( elems[i].name ) === -1 ) {
        names.push( elems[i].name ); 
    }
}

Answer 2

这是一个非常简单的函数来返回你想要的数组。不需要 jQuery。

function linksArray(){
    var links = document.getElementsByTagName("a"), linklist = [];
    for(var i=0, len=links.length; i<len; ++i){
        linklist.push(links[i].attributes.getNamedItem("href").value);
    }
    return linklist;
}

Answer 3

您不想要一个锚点列表而不是指向锚点的链接列表吗？使用a[name],a[id]:not([href]) 选择器查找所有具有名称或id 但没有href 的锚元素。

$('a[name],a[id]:not([href])').each(function(i,e){
  var name = $(e).attr('name') | $(e).attr('id');
  $('<option/>', { value: '#'+name, text: e.text() }).appendTo('#TheSelect');
});

Answer 4

jQuery 让这变得非常简单：

$("a").filter( function() {
    return $(this).attr("href")[0] == "#";
} ).each( function() {
    $("select").append("<option>" + $(this).attr("href") + "</option>");
} );

这只是将“href”字段的文本作为“option”标志的文本添加到页面上的每个“select”字段。显然，您需要对其进行定制以满足您的需求，但这应该可以帮助您入门。