0

我正在使用 ligatures.js 用某些字符组合的连字替换我网站中的文本。例如，“五”中的“fi”。

这是我的例子：http: //jsfiddle.net/vinmassaro/GquVy/

当你运行它时，你可以选择输出文本，看到'五'中的'fi'已经按预期变成了一个字符。如果您复制链接地址并粘贴它，您将看到 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( //...

但是，它仅适用于标题内的链接，我不确定这是否是您要查找的内容。如果您想要适用于某个元素内的任何内容（具有任何级别的标签嵌套）的东西，那么您将需要一种递归方法。这是一个想法，它基本上是纯 JavaScript，因为 jQuery 不提供针对 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;');
});

这应该适用于这样的内容：

<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 回答