Question

我正在尝试返回并在变量中捕获匹配的字符串的下一个直接锚标记。我想只获得匹配字符串后面的单个锚标记，而不是其他内容。这是我被困的地方。这是代码和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/

非常感谢任何帮助。如果您需要更多信息，请与我们联系。

Answer 1

您可以使用.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();
}

http://jsfiddle.net/V86t6/7/

附注：不要通过全局变量在函数之间进行通信。每个函数应该只使用自己的局部变量或封闭变量。

Answer 2

我用过这个：

$('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);
        }
    });
});

点击按钮，它会遍历您要搜索的每个元素。如果元素内容与正则表达式匹配，那么我们找到下一个链接。在此之后，您可以使用链接执行任何操作。

JSFiddle

<强>更新

这是一个纯JS版本。请注意，这仅与IE 9+兼容，因为我使用了document.getElementsByClassName()。

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;
            }
        }
    }
});

JSFiddle

Answer 3

你可以通过这样做来简化这个：

function myFunction() {
    parseIt = $("p strong").filter(function () {
        return this.innerText.match(/Regular Edition of 325/);
    });
    var anchor = parseIt.parent().next("a");
}

http://jsfiddle.net/V86t6/9/

Answer 4

如果你想要一个来自锚点的属性，那么它更容易遍历＆＃34; a＆＃34;标签而不是段落节点。你可以使用jQuery＆＃34; prev（）＆＃34;访问前面的＆＃34; p＆＃34;并检查其文本是否与正则表达式匹配。 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 / nearest等。

由于调用了纯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：匹配字符串后返回锚标记

4 个答案: