جافا سكريبت باستخدام التعابير المنطقية لاستخراج مرساة النص عنوان URL من مرساة الكلمات

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

  •  21-08-2019
  •  | 
  •  

سؤال

لدي الفقرة من النص في متغير جافا سكريبت يسمى '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), ولكن أنا الحيرة أبعد من هذه النقطة.شكرا للمساعدة!

هل كانت مفيدة؟

المحلول

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] هو href جزء
  • الحجج[3] هو النص داخل

سوف نستخدم هاك لدفع هذه ثلاث حجج مجموعة جديدة في الرئيسية matches الصفيف.على arguments المدمج في متغير ليس صحيحا جافا سكريبت مجموعة, لذا يجب علينا تطبيق 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

نصائح أخرى

ومنذ كنت المفترض تشغيل جافا سكريبت في متصفح الويب، باستخدام التعابير المنطقية يبدو وكأنه فكرة سيئة لهذا الغرض. إذا جاءت الفقرة من الصفحة في المقام الأول، والحصول على مقبض للحاوية، والدعوة .getElementsByTagName() للحصول على المراسي، ومن ثم استخراج القيم التي تريد بهذه الطريقة.

إذا لم يكن ذلك ممكنا ثم إنشاء كائن عنصر HTML جديد، تعيين النص لانها ممتلكات .innerHTML، ومن ثم استدعاء .getElementsByTagName().

أعتقد جويل الحق من ذلك — regexes سيئة السمعة اللعب بشكل سيئ مع العلامات ، كما أن هناك ببساطة الكثير من الاحتمالات في الاعتبار.هناك سمات أخرى إلى مرساة العلامات ؟ ما أمر هم ؟ هو فصل بيضاء دائما واحدة الفضاء ؟ بما أنك بالفعل المتصفح 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;
}

هذا سيعود صفيف مثل واحد يمكنك أن تصف بغض النظر عن كيف يتم تخزين الروابط.لاحظ أنه يمكنك تغيير وظيفة للعمل مع تمرير عنصر بدلا من النص عن طريق تغيير اسم المعلمة إلى "الحاوية" وإزالة أول سطرين.على textContent/innerText المنشأة يحصل على النص المعروض على الرابط ، تجريده من أي توصيف (جريئة/مائل/font/...).هل يمكن أن تحل محل .textContent مع .innerHTML وإزالة الداخلية إذا() البيان إذا كنت ترغب في الحفاظ على العلامات.

مسج سيكون أفضل رهان. ليس هذا هو أفضل سيناريو وأنا متأكد من أن الآخرين يمكن أن تعطي شيئا أفضل. ولكن هذا يخلق مجموعة من بالضبط ما كنت أبحث عنه.

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

لاستخراج رابط:

ونمط فار = /.href="(.)".*/. فار 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 و <لأ href = "https://regex101.com/r / nT1hW5 / 4 "يختلط =" نوفولو noreferrer "> 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