Appliquer une ligature avec jquery pour lier le texte uniquement, pas de lien href

Question

Je suis à l'aide de ligatures.js pour remplacer du texte dans mon site avec la ligature de certaines combinaisons de caractères.Par exemple, le " fi "dans " cinq".

Voici mon exemple: http://jsfiddle.net/vinmassaro/GquVy/

Lorsque vous l'exécutez, vous pouvez sélectionner du texte de sortie et de voir que le " fi "dans" cinq " est devenue un personnage comme prévu.Si vous copiez l'adresse du lien et de le coller, vous verrez que le href partie a été remplacé ainsi:

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

C'est involontaire et brise le lien.Comment puis-je faire le remplacement sur le texte du lien mais pas le href partie?J'ai essayé d'utiliser .texte() et .pas de() avec pas de chance.Merci à l'avance.

Answer 1

Je pense que vous pouvez le résoudre à l'aide des sélecteurs jQuery appropriés

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

voir http://jsfiddle.net/gquvy/7/

Answer 2

Vous êtes à l'application de la fonction à l'ensemble de la tête innerHTML, qui comprend l'ancre href attribut.Cela devrait fonctionner pour votre violon exemple:

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

Cependant, il ne fonctionnera que sur les liens dans les titres, et je ne suis pas sûr que ce soit ce que vous cherchez.Si vous voulez quelque chose qui fonctionne pour tout contenu à l'intérieur d'un certain élément (avec tout au niveau de la balise de nidification), puis vous aurez besoin d'une approche récursive.Ici, c'est une idée, qui est au fond de la plaine JavaScript depuis jQuery ne fournit pas un moyen pour cibler les DOM les nœuds de texte:

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

Qui doit travailler sur le contenu comme ceci:

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