Applica la legatura con jquery per collegare solo il testo, non collegare href

Question

Sto utilizzando ligatures.js per sostituire il testo all'interno del mio sito con la legatura di alcune combinazioni di caratteri.Ad esempio, la "fi" in "cinque".

Ecco il mio esempio: http://jsfiddle.net/vinmassaro/GquVy/

Quando lo esegui, puoi selezionare il testo di output e vedere che "fi" in "cinque" è diventato un carattere come previsto.Se copi l'indirizzo del collegamento e lo incolli, vedrai che anche la parte href è stata sostituita:

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

Ciò non è intenzionale e interrompe il collegamento.Come posso effettuare la sostituzione SOLO del testo del collegamento ma non della parte href?Ho provato a utilizzare .text() e .not() senza fortuna.Grazie in anticipo.

Answer 1

Penso che tu possa risolverlo utilizzando gli appositi selettori jQuery

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

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

Answer 2

Stai applicando la funzione all'intera intestazione innerHTML, che include l'ancora href attributo.Questo dovrebbe funzionare per il tuo esempio di violino:

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

Tuttavia, funzionerà solo sui collegamenti all'interno dei titoli e non sono sicuro che sia quello che stai cercando.Se vuoi qualcosa che funzioni Qualunque contenuto all'interno di un determinato elemento (con Qualunque livello di annidamento dei tag), allora avrai bisogno di un approccio ricorsivo.Ecco un'idea, che è fondamentalmente un semplice JavaScript poiché jQuery non fornisce un modo per indirizzare i nodi di testo 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;');
});

Dovrebbe funzionare su contenuti come questo:

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