Aplicar a ligadura com jquery para vincular o texto, não só, a link href

Question

Eu estou usando ligatures.js para substituir texto em meu site com a ligadura de algumas combinações de caracteres.Por exemplo, o 'fi' em 'cinco'.

Aqui é o meu exemplo: http://jsfiddle.net/vinmassaro/GquVy/

Quando você executá-lo, você pode selecionar a saída de texto e ver que o 'fi' em 'cinco' tornou-se um personagem, como se pretende.Se você copiar o endereço do link e colá-lo, você vai ver que a href parte foi substituído assim:

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

Este não é intencional e quebra a ligação.Como posso fazer a substituição APENAS do texto do link, mas não a href parte?Tentei usar .texto() e .não() sem sorte.Obrigado antecipadamente.

Answer 1

Eu acho que você pode resolver isso utilizando o adequado jQuery, seletores

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

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

Answer 2

Você está aplicando a função para o todo do título innerHTML, que inclui a âncora do href atributo.Isso deve funcionar para o seu violino exemplo:

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

No entanto, ele só funcionará em links dentro de rubricas, e eu não tenho certeza que é o que você está procurando.Se você deseja algo que funciona para qualquer o conteúdo dentro de um determinado elemento (com qualquer nível de aninhamento de tags), então você vai precisar de uma abordagem recursiva.Aqui está uma idéia, que é, basicamente, JavaScript puro desde o jQuery não fornece uma maneira de destino DOM de nós de texto:

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

Que deverá funcionar no conteúdo parecido com este:

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