如何获取<a> href found in an element?

Question

Given an html like this:

<tr>
    <th style="padding-right:1em">Location</th>
    <td>
        <span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span>
    </td>
</tr>

How do I get Geum_River and Korea?

This is what I am doing at the moment:

countryLinks = doSelect("Location").siblings('td').find('a').attr('href');
function doSelect(text) {
  return $wikiDOM.find(".infobox th").filter(function() {
    return $(this).text() === text;
  });
}

function countryList() {
  let pattern = new RegExp('\/wiki\/');
  string = countryLinks;
  countryListLinks = string.replace(pattern, '');
  console.log(countryListLinks);
}

if (doSelect('Location').length > 0 && doSelect('Date').length > 0) {
  countryList();
};

I am splitting /wiki/ from the string and it works but I am only getting the first one Geum_River while I would expect all of the <a>s href.

Answer 1

您只选择了第一个doLogin = socket => data => { 元素socket.on('doLogin', doLogin.bind(socket)); ，<a>返回单个值。 .href .attr()的第二个条件是if，问题为HTML。

您可以使用&& doSelect('Date').length > 0和false返回.map()个元素.get()值的数组，然后将<a>函数传递给.href迭代countryList值。

还应调整Array.prototype.forEach()以替换所有字符，包括“wiki”.href。

RegExp

'^.+\/wiki\/'

Answer 2

您的主要问题是当您拨打countryLinks = doSelect("Location").siblings('td').find('a').attr('href');时，当您拨打最后一位.attr('href'); which the docs state this of时

  

描述：获取匹配元素集中第一个元素的属性值。

基本上，你正在获取链接的集合，然后将该集合简化为第一个元素并返回它的 href属性。

以下是使用.map()代替我的方法：

＆＃13;

＆＃13;

var $wikiDOM = $('.some-container');

var links = $.map($wikiDOM.find('td a'),function(link, i){
     return (link.href || '').replace(/^.*[\\\/]/, '');
});
console.log(links); 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-container">
<table>
    <tr>
    <th style="padding-right:1em">Location</th>
    <td>
        <span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span>
    </td>
</tr>
</table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以使用jQuery each（）来获取数组中的所有href，然后使用for循环逐个显示。 这是代码：

var hrefs = new Array();

jQuery('.location').find('a').each(function() {
    hrefs.push(jQuery(this).attr('href'));
});

function countryList() {
  let pattern = new RegExp('\/wiki\/');
for(var i=0; i < hrefs.length ; i++){
  string = hrefs[i];
  var countryListLinks = string.replace(pattern, '');
  alert(countryListLinks);
}
}

countryList();

完整代码，应该看起来像这样：

function doSelect(text) {
  return $wikiDOM.find(".infobox th").filter(function() {
    return $(this).text() === text;
  });
}

var hrefs = new Array();

jQuery('.location').find('a').each(function() {
    hrefs.push(jQuery(this).attr('href'));
});
function countryList() {
  let pattern = new RegExp('\/wiki\/');
for(var i=0; i < hrefs.length ; i++){
  string = hrefs[i];
  var countryListLinks = string.replace(pattern, '');
  console.log(countryListLinks);
}
}
if (doSelect('Location').length > 0 && doSelect('Date').length > 0) {
  countryList();
};

  var hrefs = new Array();

    
    jQuery('.location').find('a').each(function() {
        hrefs.push(jQuery(this).attr('href'));
    });
    
    function countryList() {
      let pattern = new RegExp('\/wiki\/');
    for(var i=0; i < hrefs.length ; i++){
      string = hrefs[i];
      var countryListLinks = string.replace(pattern, '');
      alert(countryListLinks);
    }
    }
    
    countryList();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<tr>
    <th style="padding-right:1em">Location</th>
    <td>
        <span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span>
    </td>
</tr>

Answer 4

首先，我要在你的span元素上弹出id，以便我可以在我的脚本中轻松找到它。

<span id="locations"

接下来，我将删除您的实现，而是使用span遍历id="locations"的子元素。接下来，我将获得我们想要的这些元素的href的子字符串，并将它们推送到数组。

var locations = document.getElementById("locations").getElementsByTagName('a');
var rawLocations = [];
for (i in locations) {
    if (locations[i].href) {
        var lastIndex = locations[i].href.lastIndexOf('/') + 1;
        rawLocations.push(locations[i].href.substring(lastIndex));
    }
}

现在，console.log(rawLocations);为我们提供了我们想要的内容：

(2) ["Geum_River", "Korea"]

Answer 5

这并不像我想象的那么容易： - ）

但是我们走了：     //缓存元素，你可以做QuerySelectorAll并遍历     //节点列表，但让我们保持简单     var ts = document.querySelector（＆＃39; a＆＃39;）;

// This is caching the href attribute from the link
var garbage = ts.href;

// here you take the link and run the native string method 
// to find the lastIndexOf, this is great if you suck at regex like myself
var n = garbage.lastIndexOf('/');

Here we extract only the part after lastIndexOf and cache it in "result"
var result = garbage.substring(n + 1);
alert(result);