Apply ligature with jquery to link text only, not link href

Question

I am using ligatures.js to replace text within my site with the ligature of some character combinations. For instance, the 'fi' in 'five'.

Here is my example: http://jsfiddle.net/vinmassaro/GquVy/

When you run it, you can select the output text and see that the 'fi' in 'five' has become one character as intended. If you copy the link address and paste it, you will see that the href portion has been replaced as well:

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

This is unintended and breaks the link. How can I make the replacement on JUST the text of the link but not the href portion? I've tried using .text() and .not() with no luck. Thanks in advance.

and now I know what a ligature is! – DMac the Destroyer Oct 03 '12 at 14:54 — DMac the Destroyer, Oct 03 '12 at 14:54

score 1 · Accepted Answer · answered Oct 03 '12 at 15:25

1

I think you can solve it using the appropiate jQuery selectors

$('h3 a, h3:not(:has(a))')
  .ligature('ffi', '&#xfb03;')
  .ligature('ffl', '&#xfb04;')
  .ligature('ff', '&#xfb00;')
  .ligature('fi', '&#xfb01;')
  .ligature('fl', '&#xfb02;');

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

answered Oct 03 '12 at 15:25

svillamayor

546
3
7

That only works for links inside h3, or h3 elements that do not contain any links. – bfavaretto Oct 03 '12 at 17:47

bfavaretto · Answer 2 · 2012-10-03T17:46:12.160

You are applying the function to the whole heading's innerHTML, which includes the anchor's href attribute. This should work for your fiddle example:

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

However, it will only work on links inside the headings, and I'm not sure that's what you're looking for. If you want something that works for any contents inside a certain element (with any level of tag nesting), then you'll need a recursive approach. Here is an idea, which is basically plain JavaScript since jQuery does not provide a way to target DOM text nodes:

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

That should work on contents like this:

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

Thanks but I do need to apply it to elements that are not links as well, so I'm hoping there's another solution. — Vincent, Oct 03 '12 at 14:58
I need to apply it to links as well as non-links, is what I am saying. It should work on headings whether they contain a link or not. — Vincent, Oct 03 '12 at 15:07
@Vincent Check out this updated solution, should work on various different scenarios. — bfavaretto, Oct 03 '12 at 17:48

Apply ligature with jquery to link text only, not link href

2 Answers2