javascript - 使用 javascript 将超链接 URL 列为脚注

Question

我正在创建一个打印样式表，我想在每个超链接旁边放置一个带编号的上标，并在带有 URL 的页面底部添加一个脚注。这将使打印页面更加清晰，同时仍然允许您查看超链接的 URL。

我的需求是:

• 在超链接出现的地方按数字顺序插入数字的上标
• 考虑重复的 URL(如果相同的 URL 出现两次，重复使用该数字)
• 指定要使用的父元素 ID(不要自动执行整个页面)

举个例子:

<p>I may link to <a href="http://www.google.com">Google</a>, 
then to <a href="http://www.yahoo.com">Yahoo</a>, then to 
<a href="http://www.google.com">Google again</a>. Then finally, 
I'll throw in <a href="http://www.bing.com">Bing</a> just for kicks.</p>

因此，Javascript 应该将其更改为显示为:

---

我可能会链接到 Google¹，然后链接到 Yahoo²，然后再链接到 Google¹。最后，我将加入 Bing³ 只是为了好玩。

链接:

1. > http://www.google.com
2. > http://www.yahoo.com
3. > http://www.bing.com

---

我在 this site 上发现了一些 2005 年的旧 Javascript 片段, 但它看起来非常过时和麻烦。

function footnoteLinks(containerID,targetID) {
    if (!document.getElementById || 
        !document.getElementsByTagName ||
        !document.createElement) return false;
    if (!document.getElementById(containerID) ||
        !document.getElementById(targetID)) return false;
    var container = document.getElementById(containerID);
    var target    = document.getElementById(targetID);
    var h2        = document.createElement('h2');
    addClass.apply(h2,['print-onlyX']);
    var h2_txt    = document.createTextNode('Links');
    h2.appendChild(h2_txt);
    var coll = container.getElementsByTagName('*');
    var ol   = document.createElement('ol');
    addClass.apply(ol,['print-onlyX']);
    var myArr = [];
    var thisLink;
    var num = 1;
    for (var i=0; i<coll.length; i++) {
      var thisClass = coll[i].className;
      if ( coll[i].getAttribute('href') ||
           coll[i].getAttribute('cite') ) { 
        thisLink = coll[i].getAttribute('href') ? coll[i].href : coll[i].cite;
        var note = document.createElement('sup');
        addClass.apply(note,['print-onlyX color-light']);
        var note_txt;
        var j = inArray.apply(myArr,[thisLink]);
        if ( j || j===0 ) {
          note_txt = document.createTextNode(j+1);
        } else {
          var li     = document.createElement('li');
          var li_txt = document.createTextNode(thisLink);
          li.appendChild(li_txt);
          ol.appendChild(li);
          myArr.push(thisLink);
          note_txt = document.createTextNode(num);
          num++;
        }
        note.appendChild(note_txt);
        if (coll[i].tagName.toLowerCase() == 'blockquote') {
          var lastChild = lastChildContainingText.apply(coll[i]);
          lastChild.appendChild(note);
        } else {
          coll[i].parentNode.insertBefore(note, coll[i].nextSibling);
        }
      }
    }
    target.appendChild(h2);
    target.appendChild(ol);
    addClass.apply(document.getElementsByTagName('html')[0],['noted']);
    return true;
  }
  window.onload = function() {
    footnoteLinks('content-main','content-main');
  }


  if(Array.prototype.push == null) {
    Array.prototype.push = function(item) {
      this[this.length] = item;
      return this.length;
    };
  };

  if (!Function.prototype.apply) {
    Function.prototype.apply = function(oScope, args) {
      var sarg = [];
      var rtrn, call;
      if (!oScope) oScope = window;
      if (!args) args = [];
      for (var i = 0; i < args.length; i++) {
        sarg[i] = "args["+i+"]";
      };
      call = "oScope.__applyTemp__(" + sarg.join(",") + ");";
      oScope.__applyTemp__ = this;
      rtrn = eval(call);
      oScope.__applyTemp__ = null;
    return rtrn;
    };
  };
  function inArray(needle) {
    for (var i=0; i < this.length; i++) {
      if (this[i] === needle) {
        return i;
      }
    }
    return false;
  }
  function addClass(theClass) {
    if (this.className != '') {
      this.className += ' ' + theClass;
    } else {
      this.className = theClass;
    }
  }
  function lastChildContainingText() {
    var testChild = this.lastChild;
    var contentCntnr = ['p','li','dd'];
    while (testChild.nodeType != 1) {
      testChild = testChild.previousSibling;
    } 
    var tag = testChild.tagName.toLowerCase();
    var tagInArr = inArray.apply(contentCntnr, [tag]);
    if (!tagInArr && tagInArr!==0) {
      testChild = lastChildContainingText.apply(testChild);
    }
    return testChild;
  }

是否有更简洁的方法来执行此操作？使用 jQuery 似乎可以减少很多旧的 Javascript。

Answer 1

检查 this .

(function($) {

  // init link's hash map
  var links = {};

  // init function named format
  // this method will format all a elements in $contianer
  var format = function($container) {
    // sup started by 1
    var index = 1;
    $container.find('a').each(function() {
      // href is map key, sup index is value
      links[$(this).attr('href')] = links[$(this).attr('href')] || index++;

      // replace the a tag inline with text and sup
      $(this).replaceWith($(this).text() + '<sup>' + links[$(this).attr('href')] + '</sup>');
    });

    // create link list
    var $list = $('<ol></ol>');
    Object.keys(links).forEach(function(link) {
      // append each link to this list
      $list.append('<li><a href="' + link + '">' + link + '</a></li>');
    })

    // append this list to $container
    $container.append($list);
  }

  $(document).ready(function() {
    // call this function
    format($('#result'));
  });
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  I may link to <a href="http://www.google.com">Google</a>, then to <a href="http://www.yahoo.com">Yahoo</a>, then to <a href="http://www.google.com">Google again</a>. Then finally, I'll throw in <a href="http://www.bing.com">Bing</a> just for kicks.
</p>

<div id="result">
  <p>
    I may link to <a href="http://www.google.com">Google</a>, then to <a href="http://www.yahoo.com">Yahoo</a>, then to <a href="http://www.google.com">Google again</a>. Then finally, I'll throw in <a href="http://www.bing.com">Bing</a> just for kicks.
  </p>
</div>