javascript - 使用javascript从url检索特定链接

Question

我需要在 JavaScript 中创建一个函数来定位 href在给定的 url 中，并将其作为字符串返回。

例如:http://stackoverflow.com/

因此该函数以:function example(url) {} 开头
我想在此网址中找到第一个包含 google 字样的链接.

在这个页面中有一个类似<a href:"http://google.com/asdasdadsa/asdada"> 的链接。
函数是将整个链接作为字符串返回。

Answer 1

所以基本上从我能收集到的信息来看，您想查看页面上的每个链接并获取整个 URL(如果它包含一些字符串(即 google))。

这是一个查找第一个与特定字符串匹配的链接的函数:

function checkLinks( searchString ) {
    var url;

    // Go through each link
    $('a').each( function ( ) { 

        // Check if the search string exists
        if(  $(this).attr('href').indexOf(searchString) != -1 ) { 
            url = $(this).attr('href');
            // If we've found one, stop the each. 
            return false;
        }
    });
    return url;
}

我整理了一个 jsfiddle，展示了如何使用此函数的示例:

http://jsfiddle.net/K9KvS/1/

编辑:

我刚刚看到您需要在远程 URL 上执行此操作。您可能需要使用 AJAX 加载代码，然后在您拥有的代码上运行它。不幸的是由于 same origin policy ，你不能直接得到这个，所以你需要在你的服务器上运行一个服务器端脚本(例如使用 PHP)来加载外部页面的内容，然后从你的 JS 调用 AJAX 将它拉到你的javascript.

修改后的版本包含一些代码的 AJAX 加载，然后是对该代码的查找:

// Create a function to do the actual search
function checkLinks( code, searchString ) {
    var url;
    // Search the code for all <a> tags, the loop over them
    $(code).find('a').each( function ( ) {

        // Check if there is a match (indexOf returns -1 if not)
        if(  $(this).attr('href').indexOf(searchString) != -1 ) {

            // set the "url" variable to the href
            url = $(this).attr('href');
            // Stop looping
            return false;

        }
    });
    return url;
}

// Now, when the page loads, attach an AJAX call to a button with ID "linkchecker"
$( function ( ) {
    $('#linkchecker').click( function( ) {
        var code;

        // Perform the AJAX call, load the data and call our function above to find "google.com"
        $.get( 'load_code.php?url=http://www.google.com', function( data ) {
            code = data;
            alert( checkLinks( code, 'google.com' ) );
        });
    });
});

load_code.php 可能看起来像这样(可能有一些错误检查等):

<?php
    $htm = file_get_contents($_GET['url']);
    echo $htm;
?>

更新:使用原始 Javascript

我们将修改上面的 checkLinks 以使用原始 Javascript:

function checkLinks( code, searchString )
{

    var url;

    // We need to create an HTML document element so we can use javascript dom functions on it.
    var doc = document.createElement("html");
    doc.innerHTML = code; // put the code into the document

    // Get all  links in the code
    var links = doc.getElementsByTagName("a")

    // Loop over all links
    for (var i=0; i<links.length; i++) {
        // Check if the search string (e.g "google.com") is found in the href of the link
        if(  links[i].getAttribute("href").indexOf(searchString) != -1 ) {
            // Set it to the return value
            url = links[i].getAttribute("href");
            // stop looping
            break;
        }
    }

    return url;
}

所以首先，您需要设置 Ajax 请求对象。问题是这在浏览器之间是不同的，所以你需要一些令人不快的代码来在它们之间生成它。以下修改自tiztag ajax tutorial :

function makeAJAXObject(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    return ajaxRequest;
}

好的，现在我们有了 AJAX 对象，我们想让它加载页面，并告诉它如何处理我们返回的内容:

/*
 * A function to load a given URL and process the code from it.
 * It takes three arguments:
 *   php_handler   The name of the PHP file that will load the code (or ASP, or whatever you choose to use) 
 *   url           The URL to be loaded.
 *   searchString  The string to find in the links (e.g. "google.com").
 */
function load_page( php_handler, url, searchString )
{
    // Get the ajax object using our function above.
    window.ajax = makeAJAXObject( );

    // Tell the AJAX object what to do when it's loaded the page
    window.ajax.onreadystatechange = function(){
        if(window.ajax.readyState == 4){ // 4 means it's loaded ok.
            // For simplicity, I'll just alert this, but you would put your code to handle what to do when a match is found here.
            alert(checkLinks( window.ajax.responseText, searchString ));    
        }
    }

    // Set up the variables you want to sent to your PHP page (namely, the URL of the page to load)
    var queryString = "?url=" + url;
    // Load the PHP script that opens the page
    window.ajax.open("GET", php_handler + queryString, true);
    window.ajax.send(null); 
}

最后一件事是在页面加载后将其附加到按钮上:

window.onload = function( ) {
    document.getElementById('linkchecker').onclick = function( ) {
        load_page('load_page.php', 'http://www.example.com', 'google');
    }
}

请注意，可能内置了 WinJS 函数来处理一些 AJAX 内容，但我从未尝试过 Win 8 应用程序开发，所以我不知道它们!