javascript - 如何使用 XPATH 和 JavaScript 选择与元素内部文本的一部分匹配的元素
问题描述
我有一个包含一些链接的 HTML 文档,我正在尝试使用 XPATH 来选择包含 AIG 公司网站的链接。
<a class="cmp-CompanyLink"
href="http://www.aig.com/careers"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>AIG website</a>
这是HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="cmp-AboutMetadata-itemInner">
<div class="cmp-AboutMetadata-itemTitle">Website</div>
<div class="cmp-AboutMetadata-itemCotent">
<a
class="cmp-CompanyLink"
href="https://twitter.com/AIGinsurance"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>Twitter</a
>
<br />
<a
class="cmp-CompanyLink"
href="https://www.facebook.com/AIGInsurance"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>Facebook</a
>
<br /><a
class="cmp-CompanyLink"
href="https://twitter.com/AIGinsurance"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>Twitter</a
><br /><a
class="cmp-CompanyLink"
href="https://www.facebook.com/AIGInsurance/"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>Facebook</a
><br /><a
class="cmp-CompanyLink"
href="https://www.linkedin.com/company/aig"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>LinkedIn</a
><br /><a
class="cmp-CompanyLink"
href="https://www.instagram.com/aigrugby/"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>Instagram</a
><br /><a
class="cmp-CompanyLink"
href="https://www.youtube.com/user/AIG"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>YouTube</a
><br /><a
class="cmp-CompanyLink"
href="http://www.aig.com/careers"
target="_blank"
rel="nofollow noopener"
data-tn-link="redirect"
data-tn-element="companyLink"
>AIG website</a
><br /><a
data-tn-action-click="true"
data-tn-element="less-link"
href="#"
>less</a
>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
这是我的 JavaScript 代码和 plunker:
var link = document.evaluate("//а[@class='cmp-CompanyLink' and contains(text(), 'website')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
document.body.innerHTML += "<br />Result:<br />";
document.body.innerHTML += link.singleNodeValue;
if(link.singleNodeValue){
const result = "<br /> found: " + link.singleNodeValue.textContent;
document.body.innerHTML += result;
}
我不确定这里有什么错误。关于为什么链接为空的任何想法?如何获得正确的节点?
解决方案
尝试使用
var link = document.evaluate(("//a[@class='cmp-CompanyLink'][contains(text(), 'website')]/@href") , document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.textContent;
document.body.innerHTML += "<br />Result:<br />";
document.body.innerHTML += link;
if(link){
const result = "<br /> found: " + link;
document.body.innerHTML += result;
}
推荐阅读
- amazon-web-services - lambda调用有效负载错误
- java - 如何使用相同的 Scanner 方法返回超过 1 个值?
- php - 如何在网站主页上显示元描述
- java - trim() 方法是否也会删除 CRLF 字符?
- neo4j - Neo4j 显式/手动索引查询、谓词中的参数和可能的 Cypher(SQL) 注入
- r - 一次比较所有 ksvm 内核的性能
- php - 如何在特殊字符串中的文本之间获取
- python - 如何将pyw文件转换为exe?
- git - 从 github 构建代码时出错
- json - 从嵌套 json 获取所需数据并将其存储在 pandas 数据框中的问题?