قم بتطبيق وصلة باستخدام jquery لربط النص فقط، وليس ربط href

Question

أنا أستخدم ligatures.js لاستبدال النص الموجود داخل موقعي بالربط الخاص ببعض مجموعات الأحرف.على سبيل المثال، "fi" في "خمسة".

هنا هو المثال الخاص بي: http://jsfiddle.net/vinmassaro/GquVy/

عند تشغيله، يمكنك تحديد النص الناتج ورؤية أن "fi" في "خمسة" أصبح حرفًا واحدًا كما هو مقصود.إذا قمت بنسخ عنوان الرابط ولصقه، فسترى أنه تم استبدال جزء href أيضًا:

/news/here-is-a-url-with-%EF%AC%81ve-ligature

وهذا غير مقصود ويقطع الارتباط.كيف يمكنني إجراء الاستبدال على نص الرابط فقط وليس على جزء href؟لقد حاولت استخدام .text() و .not() دون جدوى.شكرا لك مقدما.

Answer 1

أعتقد أنه يمكنك حلها باستخدام محددات jQuery المناسبة

$('h3 a, h3:not(:has(a))')
  .ligature('ffi', 'ffi')
  .ligature('ffl', 'ffl')
  .ligature('ff', 'ff')
  .ligature('fi', 'fi')
  .ligature('fl', 'fl');

يرى http://jsfiddle.net/GquVy/7/

Answer 2

أنت تقوم بتطبيق الوظيفة على العناوين بأكملها innerHTML, ، والذي يتضمن المرساة href يصف.يجب أن يعمل هذا مع مثال الكمان الخاص بك:

$('h1 a, h2 a, h3 a, h4 a').ligature( //...

ومع ذلك، فإنه سيعمل فقط على الروابط الموجودة داخل العناوين، ولست متأكدًا من أن هذا هو ما تبحث عنه.إذا كنت تريد شيئًا يعمل من أجله أي محتويات داخل عنصر معين (مع أي مستوى تداخل العلامات)، فستحتاج إلى أسلوب عودي.إليك فكرة، وهي عبارة عن جافا سكريبت عادي بشكل أساسي نظرًا لأن jQuery لا يوفر طريقة لاستهداف العقد النصية في DOM:

$.fn.ligature = function(str, lig) {
    return this.each(function() {
        recursiveLigatures(this, lig);
    });

    function recursiveLigatures(el, lig) {
        if(el.childNodes.length) {
            for(var i=0, len=el.childNodes.length; i<len; i++) {
                if(el.childNodes[i].childNodes.length > 0) {
                    recursiveLigatures(el.childNodes[i], lig);
                } else {
                    el.childNodes[i].nodeValue = htmlDecode(el.childNodes[i].nodeValue.replace(new RegExp(str, 'g'), lig));
                }
            }
        } else {
            el.nodeValue = htmlDecode(el.nodeValue.replace(new RegExp(str, 'g'), lig));
        }
    }

    // http://stackoverflow.com/a/1912522/825789
    function htmlDecode(input){
      var e = document.createElement('div');
      e.innerHTML = input;
      return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }
};

// call this from the document.ready handler
$(function(){
    $('h3').ligature('ffi', '&#xfb03;')
           .ligature('ffl', '&#xfb04;')
           .ligature('ff', '&#xfb00;')
           .ligature('fi', '&#xfb01;')
           .ligature('fl', '&#xfb02;');
});

يجب أن يعمل ذلك على محتويات مثل هذا:

<h3>
    mixed ffi content 
    <span>this is another tag ffi <span>(and this is nested ffi</span></span>
    <a href="/news/here-is-a-url-with-ffi-ligature">Here is a ffi ligature</a>
</h3>

http://jsfiddle.net/JjLZR/