javascriptの正規表現の抽出アンカーテキストやURLからアンカータグ

StackOverflow https://stackoverflow.com/questions/369147

  •  21-08-2019
  •  | 
  •  

質問

いテキストの段落をjavascriptの変数と呼ばれるinput_content'このテキストを含む複数のアンカータグ/リンクになります。い合わせのすべてのアンカータグ抽出アンカーテキストやURL、およびこれを配列（または類似すること:

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

また、クールでhttp://pastie.org/339755がんstumpedを超えます。のは助かります！

役に立ちましたか？

解決 

var matches = [];

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

これはこのアンカーのもの <a href="...">...</a> すなわちな作品がある場合その他の属性(例えば、 target).正規表現に改善することができる。

の正規表現:

/ -> 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

各呼び出して匿名の機能を受ける三つのトークンとして、第二、第三、第四引数は、引数[1],引数が[2]、引数[3]:

  • 引数[1]が全体のアンカー
  • 引数[2]、<a href部
  • 引数[3]のテキスト内

に使用しますが、必要に押しこれら三つの引数として新しい配列への当社の主要 matches 配列に格納します。の arguments 内蔵変数ではないJavaScriptの配列になっているとの split アレイ法で抽出の項目したい:

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

この項目を抽出から arguments 開始インデックス1期（）内のインデックス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"));

受けとる:

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

他のヒント

あなたはおそらく、WebブラウザでJavaScriptを実行しているので、正規表現は、このために悪いアイデアのように思えます。段落が最初の場所でのページから来た場合は、コンテナのハンドルを取得し、アンカーを取得するために.getElementsByTagName()を呼び出し、その後、あなたがそのようにしたい値を抽出。

それができない場合は、新しいHTML要素オブジェクトを作成し、そこにテキストを割り当てる.getElementsByTagName()を呼び出し、その後.innerHTML財産だ、と。

私はジョエルはそれの権利を持っていると思います - 単純に考慮すべきあまりにも多くの可能性があるとして、正規表現は、マークアップと悪い演奏で有名です。アンカータグに存在し、他の属性がありますか？彼らはどのような順序になっていますか？分離空白は常に単一のスペースですか？すでに代わりに動作するようにそれを置くために、ブラウザのHTMLのパーサの利用可能を持っている最高と見ています。

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

これは、あなたが関係なく、リンクが保存されている方法の説明のような配列を返します。あなたは、「コンテナ」にパラメータ名を変更し、最初の2行を除去することにより、テキストの代わりに渡された要素と連携する機能を変えることができることに注意してください。 TextContent /のinnerTextプロパティは、任意のマークアップを剥奪リンクに対して表示されるテキストを、（太字/斜体/フォント/ ...）を取得します。あなたはマークアップを保持したい場合は、.innerHTMLで.textContentを交換し、内側の場合は（）ステートメントを削除することができます。

私は jQueryののが最善の策だと思います。これが最善のスクリプトではありませんし、私は他の人がより良い何かを与えることができます確信しています。しかし、これはあなたが探しているまさにの配列を作成します。

<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>

URLを抽出するには：

VARパターン= /.href="(.)".*/。 VaRのURL = string.replace（パターン、 '$ 1'）;

デモます：

//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)

「アンカーテキスト」の場合は、なぜ使用しません： link.innerHtml

の利益のために在籍:作成したものとして追加の属性にアンカータグです。の方に慣れていない正規表現は、ドル（1ドルなど)の値は正規表現グループ。

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

参照作 jsFiddle や regex101.

また、お客様の情報を出し、グループのようになります:

var returnText = text.replace(urlPattern, function(fullText, beforeLink, anchorContent, href, lnkUrl, linkText, endAnchor){
                    return "The bits you want e.g. linkText";
                });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top