JavaScript：匹配字符串后返回錨標記
[英]JavaScript: Return anchor tag after string is matched
問題描述
我試圖返回並在變量中捕獲匹配的字符串的下一個立即錨標記。 我只想在匹配的字符串后面得到單個錨標簽，而沒有別的。 這就是我卡住的地方。 這是代碼和jsfiddle。
<body>
<p id="demo">Click the button to display the matches.</p>
<p><strong>Regular Edition of 325</strong></p>
<a href="link1.html">Link 1</a>
<p><strong>Regular Edition of 658</strong></p>
<a href="link2.html">Link 2</a>
<p><strong>Regular Edition of Something Else</strong></p>
<a href="link3.html">Link 3</a>
<p></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction(){
parseIt = $("p").find("strong").text();
matchIt();
}
function matchIt(){
resIt = parseIt.match(/Regular Edition of 325/);
document.getElementById("demo").innerHTML=resIt;
console.log($(resIt));
}
</script>
</body>
http://jsfiddle.net/pbpyrojust/V86t6/6/
任何幫助是極大的贊賞。 如果您需要更多信息，也請告訴我。
4 個解決方案
解決方案1
1 2014-04-04 18:07:57
您可以使用.filter通過匹配的文本獲取p元素：
function myFunction(){
parseIt = $("p").find("strong");
matchIt();
}
function matchIt(){
resIt = parseIt.filter(function () {
return $(this).text().match(/Regular Edition of 325/);
});
document.getElementById("demo").innerHTML= resIt.parent().next().text();
}
注意：不要通過全局變量在函數之間進行通信。 每個函數應僅使用其自己的局部變量或封閉變量。
解決方案2
1 2014-04-04 18:10:53
我用這個：
$('button').click(function() {
$('p.search').each(function() {
if(this.innerHTML.match(/Regular Edition of 325/)) {
var $link = $(this).next('a');
$('#demo').text($link.text());
console.log($link);
}
});
});
單擊按鈕時，它將遍歷您要搜索的每個元素。 如果元素內容與正則表達式匹配，則找到下一個鏈接。 之后，您可以使用鏈接執行任何操作。
更新：
這是純JS版本。 請注意，由於我使用document.getElementsByClassName() ，因此僅與IE 9+兼容。
document.getElementById('trigger').addEventListener('click', function() {
var paragraphs = document.getElementsByClassName('search');
for(var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs[i];
if(paragraph.innerHTML.match(/Regular Edition of 325/)) {
var link = paragraph.nextSibling;
while(link) {
if(link.tagName === 'A') {
document.getElementById('demo').innerHTML = link.innerHTML;
console.log(link);
break;
}
link = link.nextSibling;
}
}
}
});
解決方案3
1 2014-04-04 18:11:32
您可以通過執行以下操作來簡化此操作：
function myFunction() {
parseIt = $("p strong").filter(function () {
return this.innerText.match(/Regular Edition of 325/);
});
var anchor = parseIt.parent().next("a");
}
解決方案4
1 已采納 2014-04-04 19:31:05
如果需要錨點的屬性，則遍歷“ a”標簽而不是段落節點會更容易。 您可以使用jQuery的“ prev（）”方法訪問前面的“ p”並檢查其文本是否與您的正則表達式匹配。 http://jsfiddle.net/V86t6/13/
function myFunction(){
var mtch = new RegExp(/Regular Edition of 325/);
$('a').each(function () {
if($(this).prev().find("strong").text().match(mtch)) {
document.getElementById("demo").innerHTML=$(this).attr("href")
}
});
}
請注意，如果html更改，則此代碼將中斷。 考慮將每個標簽/鏈接包裝在div中並遍歷容器，而不是使用prev / next / closest等遍歷。
由於需要使用純JS版本（ http://jsfiddle.net/V86t6/15/ ）：
function myFunction(){
var mtch = /Regular Edition of 325/;
Array.prototype.forEach.call(
document.querySelectorAll('p strong'),
function(strong) {
if(strong.innerHTML.match(mtch))
document.getElementById("demo").innerHTML = strong.parentNode.nextElementSibling.href;
}
);
}
Javascript將URL轉換為“ anchor”標簽並將標簽作為字符串存儲在數組中
[英]Javascript converting the URL to an ‘anchor’ tag and store the tag as a string in an array
在javascript中頁面加載后如何在錨標記上觸發onclick事件
[英]How to trigger onclick event on an anchor tag after page load in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.