通过javascript获取href标记的值

get value of href tag through javascript

本文关键字：href javascript 获取 通过      更新时间：2023-09-26

如何使用javascript获取href标记中>testhere</a>之间的文本值？

<a style="color:#39485;" href="/index.html">Hello, 112</a>

112和/index.html总是不同的，唯一相同的是Hello，所以考虑到这一点，我如何获得在这种情况下为112的值？我不想要"你好"部分，只需要112。数字的数量可能会有所不同，不一定是像这个这样的3位数。上面的行是：

<div id="nna">

下面的一个是：

</span>

另一个是：

<a href="/index/page?number=33" class="page_number">

/索引/页面？number=将始终相同，类值也将始终相同。上面的行总是：

<div id="mla">

下面的行总是：

<div class="friend_block_avatar">

希望这会让事情变得更容易。我想得到一个总是不同的数字，在这种情况下是33。我将在我的浏览器中运行javascript，它通过url栏进行chrome操作，如下所示：javascript:javascriptcodegoeshere。所以我不能使用jquery。这个数字的位数也可能不同，不一定是2位数长。这两者都将在同一页面的源代码中。

第一个场景：

找到所有的锚，然后如果文本以"你好"开头，提取它：

var anchors = document.getElementsByTagName('a'),
    values = [],
    str = /Hello, /,
    i;
for (i = 0; i < anchors.length; i += 1) {
    if (str.test(anchors[i].text)) {
        values.push(anchors[i].text.replace(str, ''));
    }
}
console.log(values); // an array containing all the values

Demo1

第二种情况：

查找href以'href="/index/page？number='开头的所有锚点，并提取值：

var anchors = document.querySelectorAll('a[href^="/index/page?number="]'),
    values = [],
    i;
for (i = 0; i < anchors.length; i += 1) {
    values.push((anchors[i].pathname + anchors[i].search).replace('/index/page?number=', ''));
}
console.log(values); // an array containing all the values

Demo2

首先查找所有锚点：

var anchors = document.links;

然后解析它们，并根据它们的独特性进行划分：Hello,:

if(anchors.length > 0) {
    for(var i in anchors) {
        var str = anchors[i].innerText;
        if(undefined !== str) {
            var parts = str.split('Hello, ');
            if(parts.length > 0 && parts[0] === '') {
                console.log(parts[1]);
            }
        }
    }
}

使用此示例数据：

<a style="color:#39485;" href="/index.html">Hello, 112</a>
<a style="color:#39485;" href="/index1.html">Hello, 113</a>
<a style="color:#39485;" href="/index2.html">Hello, 114</a>
<a style="color:#39485;" href="/index3.html">113</a>
<a href="/index/page?number=33" class="page_number">Hello, 123</a>

您的控制台将显示112、113、114和123。

Fiddle here

由于您的href和innerHTML前缀总是相同的，并且您只是在寻找后面的数字，因此可以使用一个简单的正则表达式来实现这一点。示例：

HTML:

<a style="color:#39485;" href="/index.html">Hello, 112</a>
<a href="/index/page?number=33" class="page_number">some link</a>
<a href="index.html">Should not be included</a>

JS:

var regex = /.*number=('d+)|Hello,'s('d+)/
var links = document.getElementsByTagName("a");
var innerHtmlNumbers = [];
var hrefNumbers = [];
for (var index = 0; index < links.length; index++) {
  var link = links[index];
  var match = regex.exec(link.getAttribute("href")); // Check the href first
  if (match) {
    // Found an href like "/index/page?number=12381239"
    var hrefNumber = match[1];
    hrefNumbers.push(hrefNumber);
  } else {
    // Check innerHTML for something like "Hello, 123813912"
    match = regex.exec(link.innerHTML);
    if (match) {
      var innerHtmlNumber = match[2];
      innerHtmlNumbers.push(innerHtmlNumber);
    }
  }
}
console.log(hrefNumbers);
console.log(innerHtmlNumbers):

看看这个jsfiddle可以看到一个工作示例。有了这个，您可以简单地一次运行所有的<a>标记。

假设：您需要页面上所有锚标记的href和html中的任意数字。

您可以从chrome中的OmniBar执行以下操作（您知道您可以使用chrome的内置控制台在当前页面上执行javascript，对吗？）。

javascript: var anchors = document.querySelectorAll('a'); anchors.forEach = [].forEach; function grabDigits (string) { var match = string.match(/'d+/); if (match && match[0]) { return match; } } anchors.forEach(function(anchor){ console.log('text: ' + grabDigits(anchor.innerHTML)); console.log('href: ' + grabDigits(anchor.href)); }); /* run with: javascript: var anchors = document.querySelectorAll('a'); anchors.forEach = [].forEach; anchors.forEach(function(anchor){ match = anchor.innerHTML.match(/'d+/); if (match && match[0]) { console.log(match[0]); } }); */

Chrome可能会剥离最初的javascript:位，因此您可能需要手动将其键入omnnibar，然后复制并粘贴脚本的其余部分。

我在这里有点随心所欲，但它似乎在起作用^^:

JS

var anchors = document.querySelectorAll('a');
anchors.forEach = [].forEach;

function grabDigits (string) {
  var match = string.match(/'d+/);
  if (match && match[0]) { 
    return match;
  }
}
anchors.forEach(function(anchor){
  console.log('text: ' + grabDigits(anchor.innerHTML));
  console.log('href: ' + grabDigits(anchor.href));
});

jsbin

我不确定我是否正确理解了你的问题——你想从其他内容中去掉数字吗？您可以使用string.split：当您有一个带断点的字符串时，例如

a="你好，112"

你可以这样做：

a.split（"，"）将返回一个数组，其中包含：

｛"你好，"，"112"｝

我希望我理解得对^^

相关文章：