Question

我使用ligatures.js用一些字符组合的连字替换我网站中的文本。例如，'五'中的'fi'。

以下是我的示例：http://jsfiddle.net/vinmassaro/GquVy/

当你运行它时，你可以选择输出文本，看看'five'中的'fi'是否符合预期的一个字符。如果您复制链接地址并粘贴它，您将看到href部分也已被替换：

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

这是无意的，打破了链接。如何在JUST链接文本而不是href部分进行替换？我尝试过使用.text（）和.not（）没有运气。提前谢谢。

Answer 1

我认为您可以使用适当的jQuery选择器来解决它

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

请参阅http://jsfiddle.net/GquVy/7/

Answer 2

您正在将该函数应用于整个标题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/

使用jquery连接仅链接文本，而不是链接href

2 个答案: