Aplique ligadura con jquery para vincular solo texto, no vincular href

Question

Estoy usando ligatures.js para reemplazar el texto dentro de mi sitio con la ligadura de algunas combinaciones de caracteres.Por ejemplo, el 'fi' en 'cinco'.

Aquí está mi ejemplo: http://jsfiddle.net/vinmassaro/GquVy/

Cuando lo ejecuta, puede seleccionar el texto de salida y ver que 'fi' en 'cinco' se ha convertido en un carácter como se esperaba.Si copia la dirección del enlace y la pega, verá que la parte href también ha sido reemplazada:

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

Esto no es intencionado y rompe el vínculo.¿Cómo puedo realizar el reemplazo SOLO en el texto del enlace pero no en la parte href?Intenté usar .text() y .not() sin suerte.Gracias de antemano.

Answer 1

Creo que puede resolverlo usando los selectores de jquery apropiados

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

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

Answer 2

Estás aplicando la función a todo el encabezado. innerHTML, que incluye el ancla href atributo.Esto debería funcionar para tu ejemplo de violín:

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

Sin embargo, sólo funcionará en enlaces dentro de los encabezados y no estoy seguro de que sea eso lo que estás buscando.Si quieres algo que funcione cualquier contenidos dentro de un determinado elemento (con cualquier nivel de anidamiento de etiquetas), entonces necesitará un enfoque recursivo.Aquí hay una idea, que es básicamente JavaScript simple ya que jQuery no proporciona una forma de apuntar a los nodos de texto 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;');
});

Eso debería funcionar en contenidos como 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/