0

ligatures.js を使用して、サイト内のテキストをいくつかの文字の組み合わせの合字に置き換えています。たとえば、「five」の「fi」です。

これが私の例です：http://jsfiddle.net/vinmassaro/GquVy/

実行すると、出力テキストを選択すると、「five」の「fi」が意図したとおりに 1 文字になっていることがわかります。リンク アドレスをコピーして貼り付けると、href 部分も置き換えられていることがわかります。

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

これは意図しないものであり、リンクが壊れます。href 部分ではなく、リンクのテキストだけを置き換えるにはどうすればよいですか? 私は .text() と .not() を使ってみましたが、うまくいきませんでした。前もって感謝します。

4

2 に答える 2

1

適切なjQueryセレクターを使用して解決できると思います

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

http://jsfiddle.net/GquVy/7/を参照してください

于 2012-10-03T15:25:17.510 に答える
0

innerHTMLアンカーのhref属性を含む見出し全体に関数を適用しています。これはあなたのフィドルの例でうまくいくはずです:

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

ただし、見出し内のリンクでのみ機能し、それがあなたが探しているものかどうかはわかりません. 特定の要素内の任意のコンテンツ (任意のレベルのタグの入れ子) に対して機能するものが必要な場合は、再帰的なアプローチが必要になります。jQuery は DOM テキスト ノードをターゲットにする方法を提供しないため、基本的にプレーンな JavaScript であるという考えがあります。

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

これは、次のようなコンテンツで機能するはずです。

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

于 2012-10-03T14:50:33.913 に答える