javascript regex Ankertext und URL von dem Anker-Tags zu extrahieren

Question

Ich habe einen Absatz von Text in einem Javascript-Variable namens 'input_content' und Text enthält mehrere Anker-Tags / Links. Ich möchte all die Anker-Tags entsprechen und Ankertext und URL zu extrahieren, und steckte es in ein Array wie (oder ähnlich) folgt aus:

Array
(
    [0] => Array
        (
            [0] => <a href="http://yahoo.com">Yahoo</a>
            [1] => http://yahoo.com
            [2] => Yahoo
        )
    [1] => Array
        (
            [0] => <a href="http://google.com">Google</a>
            [1] => http://google.com
            [2] => Google
        )
)

Ich habe einen Riss an sie getroffen ( http://pastie.org/339755 ), aber ich bin über diesen Punkt hinaus stapfte. Danke für die Hilfe!

Answer 1

var matches = [];

input_content.replace(/[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g, function () {
    matches.push(Array.prototype.slice.call(arguments, 1, 4))
});

Dies setzt voraus, dass Ihr Anker immer in Form <a href="...">...</a> sein heißt, es wird nicht funktionieren, wenn es keine anderen Attribute ist (zum Beispiel target). Der reguläre Ausdruck kann verbessert werden, um dies zu ermöglichen.

Um den regulären Ausdruck zu brechen:

/ -> start regular expression
  [^<]* -> skip all characters until the first <
  ( -> start capturing first token
    <a href=" -> capture first bit of anchor
    ( -> start capturing second token
        [^"]+ -> capture all characters until a "
    ) -> end capturing second token
    "> -> capture more of the anchor
    ( -> start capturing third token
        [^<]+ -> capture all characters until a <
    ) -> end capturing third token
    <\/a> -> capture last bit of anchor
  ) -> end capturing first token
/g -> end regular expression, add global flag to match all anchors in string

Jeder Aufruf an unsere anonyme Funktion wird drei Token als die zweiten, dritten und vierten Argumente erhalten, nämlich Argumente [1], Argumente [2] Argumente [3]:

• Argumente [1] ist der gesamte Anker
• Argumente [2] ist das href Teil
• Argumente [3] ist der Text innerhalb von

Wir werden einen Hack verwenden diese drei Argumente als neues Array in unsere matches Array zu schieben. Die arguments integrierte Variable ist kein echter JavaScript Array, so dass wir die split Array-Methode auf sie anwenden müssen, um die Elemente zu extrahieren wir wollen:

Array.prototype.slice.call(arguments, 1, 4)

Dies wird Elemente aus arguments extrahiert bei Index 1 beginnt und endet (nicht inklusive) an der Stelle 4.

var input_content = "blah \
    <a href=\"http://yahoo.com\">Yahoo</a> \
    blah \
    <a href=\"http://google.com\">Google</a> \
    blah";

var matches = [];

input_content.replace(/[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g, function () {
    matches.push(Array.prototype.slice.call(arguments, 1, 4));
});

alert(matches.join("\n"));

Gibt:

<a href="http://yahoo.com">Yahoo</a>,http://yahoo.com,Yahoo
<a href="http://google.com">Google</a>,http://google.com,Google

Answer 2

Da Sie vermutlich JavaScript in einem Webbrowser ausgeführt wird, scheint regex wie eine schlechte Idee für diese. Wenn der Absatz von der Seite an erster Stelle kommt, einen Griff für den Behälter erhalten, rufen .getElementsByTagName() die Anker zu bekommen, und dann die Werte extrahieren mögen Sie auf diese Weise.

Wenn das nicht möglich ist, dann ein neues HTML-Element-Objekt erstellen, weisen Sie Ihren Text, um es .innerHTML ist Eigentum und dann .getElementsByTagName() nennen.

Answer 3

Ich denke, Joel das Recht hat - reguläre Ausdrücke sind berüchtigt für schlecht mit Markup zu spielen, da es einfach zu viele Möglichkeiten zu prüfen. Gibt es andere Attribute an die Anker-Tags? Was sind, um sie in? Ist die Trennung Leerzeichen immer ein einzelner Raum? wie sehen Sie bereits einen HTML-Browser haben Parser zur Verfügung, am besten auf das setzen, anstatt zu arbeiten.

function getLinks(html) {
    var container = document.createElement("p");
    container.innerHTML = html;

    var anchors = container.getElementsByTagName("a");
    var list = [];

    for (var i = 0; i < anchors.length; i++) {
        var href = anchors[i].href;
        var text = anchors[i].textContent;

        if (text === undefined) text = anchors[i].innerText;

        list.push(['<a href="' + href + '">' + text + '</a>', href, text];
    }

    return list;
}

Dies wird ein Array wie die Rückkehr Sie beschreiben, unabhängig davon, wie die Verknüpfungen gespeichert sind. Beachten Sie, dass Sie die Funktion ändern könnten mit einem bestandenen Elemente anstelle von Text zu arbeiten, indem die Parameternamen „Container“ und Entfernen der ersten beiden Zeilen. Die textcontent / Innertext-Eigenschaft Ruft den Text für den Link angezeigt, jeden Markup (fett / kursiv / font / ...) gestrippt. Sie könnten .textContent mit .innerHTML ersetzen und die innere if () Anweisung entfernen, wenn Sie das Markup erhalten wollen.

Answer 4

Ich denke, JQuery wäre die beste Wahl sein. Dies ist nicht das beste Drehbuch und ich bin sicher, dass andere besser etwas geben können. Aber das schafft eine Reihe von genau das, was Sie suchen.

<script type="text/javascript">
    // From http://brandonaaron.net Thanks!
    jQuery.fn.outerHTML = function() {
        return $('<div>').append( this.eq(0).clone() ).html();
    };    

    var items = new Array();
    var i = 0;

    $(document).ready(function(){
        $("a").each(function(){
            items[i] = {el:$(this).outerHTML(),href:this.href,text:this.text};
            i++;      
        });
    });

    function showItems(){
        alert(items);
    }

</script>

Answer 5

die URL zu extrahieren:

var pattern = /.href="(.)".*/; var url = string.replace (Muster, '$ 1');

Demo:

//var string = '<a id="btn" target="_blank" class="button" href="https://yourdomainame.com:4089?param=751&amp;2ndparam=2345">Buy Now</a>;'
//uncomment the above as an example of link.outerHTML

var string = link.outerHTML
var pattern = /.*href="(.*)".*/;
var href = string.replace(pattern,'$1');
alert(href)

Für "Anchor-Text" verwenden, warum nicht: link.innerHtml

Answer 6

Zum Nutzen der Forscher: Ich habe etwas, das mit zusätzlichen Attributen in der Anker-Tag arbeiten. Für diejenigen, die nicht mit Regex, der Dollar ($ 1 usw.) Werte sind die Regex Gruppe entspricht.

var text = 'This is my <a target="_blank" href="www.google.co.uk">link</a> Text';
var urlPattern = /([^+>]*)[^<]*(<a [^>]*(href="([^>^\"]*)")[^>]*>)([^<]+)(<\/a>)/gi;
var output = text.replace(urlPattern, "$1___$2___$3___$4___$5___$6");
alert(output);

Siehe Arbeits jsFiddle und regex101 .

Alternativ können Sie auch Informationen aus den Gruppen wie diese:

var returnText = text.replace(urlPattern, function(fullText, beforeLink, anchorContent, href, lnkUrl, linkText, endAnchor){
                    return "The bits you want e.g. linkText";
                });