Anwenden Binde mit jquery auf den link nur text, kein link href

Question

Ich bin mit ligatures.js zum ersetzen von text innerhalb meiner Website mit der Ligatur der einige Charakter-Kombinationen.Für Beispiel, die 'fi' in 'fünf'.

Hier ist mein Beispiel: http://jsfiddle.net/vinmassaro/GquVy/

Wenn Sie es ausführen, können Sie die Ausgabe von text und sehen, dass der 'WLAN' in 'fünf' hat sich zu einem Charakter wie vorgesehen.Wenn Sie Kopie die link Adresse und paste es, Sie werden sehen, dass das href-Teil ersetzt wurde, sowie:

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

Dies ist ungewollt und bricht den link.Wie kann ich als Ersatz NUR auf den text, der den link, aber nicht das href-Teil?Ich habe versucht, mit .text () - und .nicht() ohne Glück.Vielen Dank im Voraus.

Answer 1

Ich denke, Sie können es lösen, indem Sie den passenden jQuery-Selektoren

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

Finden http://jsfiddle.net/GquVy/7/

Answer 2

Sie sind die Anwendung der Funktion auf die gesamte Rubrik innerHTML, enthält den Anker, s href Attribut.Diese Arbeit sollte für Ihre Geige Beispiel:

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

Jedoch, es funktioniert nur auf links in den überschriften, und ich bin mir nicht sicher, was Sie suchen.Wenn Sie wollen etwas, das funktioniert für alle Inhalte in einem bestimmten element (mit alle Ebene der Verschachtelung der Tags), dann benötigen Sie einen rekursiven Ansatz.Hier ist eine Idee, die im Grunde einfachen JavaScript-da jQuery nicht bieten eine Möglichkeit, Ziel-DOM-Textknoten:

$.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;');
});

Diese Arbeit sollte auf Inhalte wie diese:

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