Question

我想在正文中搜索包含/test/的href。然后我想返回整个href值，例如/test/123/。

以下是我迄今为止提出的问题。我知道它可以找到/test/，但我正在努力恢复完整的href值。有什么想法吗？

function() {
    var htmlString = $('body').html().toString();
    var index = htmlString.indexOf("/test/");
    if (index != -1)
        return index.closest('div').find('a').attr('href');
}

HTML：

<div>
    <a href="/test/123/">Test</a>
</div>

提前致谢。

Answer 1

您可以像使用jQuery contain attribute选择器一样执行此操作。

$('a[href*="/test/"]').attr('href');

Answer 2

使用starts with选择器

$( "a[href='^/test/'" ).attr( "href" )

Answer 3

您可以使用CSS “子串匹配属性选择器”来搜索字符串中的单词。

  $("body a[href='^/test/'").attr("href")

[ATT] 表示具有att属性的元素，无论属性的值是什么。

[ATT = VAL] 表示具有att属性的元素，其值正好是＆＃34; val＆＃34;。

[ATT〜= VAL] 表示具有att属性的元素，该属性的值是以空格分隔的单词列表，其中一个正好是＆＃34; val＆＃34;。如果＆＃34; val＆＃34;包含空格，它永远不会代表任何东西（因为单词用空格分隔）。如果＆＃34; val＆＃34;是空字符串，它永远不会代表任何东西。

[ATT | = VAL] 表示具有att属性的元素，其值正好是＆＃34; val＆＃34;或以＆＃34; val＆＃34;开头紧随其后的是＆＃34; - ＆＃34; （U + 002D）。这主要是为了允许语言子代码匹配（例如，HTML中的元素上的hreflang属性），如BCP 47（[BCP47]）或其后继者中所述。对于lang（或xml：lang）语言子代码匹配，请参阅：lang伪类。

参考：Reference link

Answer 4

您正在使用jQuery，因此请使用“属性包含选择器”（https://api.jquery.com/attribute-contains-selector/）并使用“attr”（http://api.jquery.com/attr/）检索href值。

以下代码行将返回包含文本“/ test /”的href的所有a元素。

var matchingElements = $("a[href*='/test/']")

...以下代码将返回其href属性的数组。

var hrefs = matchingElements.map(function(index, element) {
    return $(element).attr('href');
});

Answer 5

打开你的控制台并运行它。它将使用“/ test /”输入所有链接。您说您正在寻找包含 “/ test /”的链接。我看到的其他答案只匹配链接开始与“/ test /".

请记住，这会拉出所有匹配的链接，而不只是一个，这样您就会返回一个数组。

const $links = $("a").filter((index, anchor) => $(anchor).attr('href').match(/\/test\//));
const hrefs = $.map($links, link => $(link).attr('href'));
console.log(hrefs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/test/123">link 1</a>
<a href="/test/456">link 2</a>
<a href="/123">link 3</a>
<a href="/456">link 4</a>
<a href="/test/789">link 5</a>

jQuery - 查找包含值的href并返回完整值

5 个答案: