Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style>
a .invisible {
  font-size: 0;
  line-height: 0;
}
</style>
</head>
<body>
  
<h3>標準設定</h3>
<ul class="normal">
  <li><a href="http://t.co/AAAAAAA">処理しない</a></li>
  <li><a href="http://t.co/AAAAAAA">http://google.co.jp/AAABBBCCCDDD/EEE?FF=GGG</a></li>
  <li><a href="http://t.co/AAAAAAA">http://google.co.jp/too_short/</a></li>
  <li><a href="http://t.co/AAAAAAA">http://日本語URL.com/AAABBBCCCDDD/EEE?FF=GGG</a></li>
  <li><a href="http://t.co/AAAAAAA">http://google.co.jp/AAABBBCCCDDD/日本語パラメーター</a></li>
</ul>
  
<h3>文字数少な目の設定</h3>
<ul class="short">
  <li> <a href="http://t.co/AAAAAAA">処理しない</a></li>
  <li> <a href="http://t.co/AAAAAAA">http://google.co.jp/AAABBBCCCDDD/EEE?FF=GGG</a></li>
  <li> <a href="http://t.co/AAAAAAA">http://google.co.jp/too_short/</a></li>
</ul>
  
<h3>省略記号の変更</h3>
<ul class="ellipsis">
  <li> <a href="http://t.co/AAAAAAA">処理しない</a></li>
  <li> <a href="http://t.co/AAAAAAA">http://google.co.jp/AAABBBCCCDDD/EEE?FF=GGG</a></li>
  <li> <a href="http://t.co/AAAAAAA">http://google.co.jp/too_short/</a></li>
</ul>
  
<h3>前方の省略</h3>
<ul class="large_front">
  <li> <a href="http://t.co/AAAAAAA">http://domai_nagai.domain-nagai.domain_nagai.co.jp/aaa/bbb/ccc?eee=fff&ggg=hijklmn</a></li>
  <li> <a href="http://t.co/AAAAAAA">http://domai_nagai.domain-nagai.domain_nagai.co.jp/too_short/</a></li>
  
  <li><a href="http://t.co/AAAAAAA">http://長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い日本語URL.com/AAABBBCCCDDD/EEE?FF=GGG</a></li>
</ul>
​
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $('.normal a').twellipsis();
  $('.short a').twellipsis({length:5});
  $('.ellipsis a').twellipsis({'tco-ellipsis':'---'});
  $('.large_front a').twellipsis({length_front:37});
});
</script>
</body>
</html>
 
(function($) {
  
    var setting = {};
  
    $.fn.twellipsis = function(options){
         
      //options
      var defaults = {
        length: 14,
        length_front: 37,
        'tco-ellipsis': '...'
      };
      setting = $.extend(defaults, options);
​
      //run
      run(this);
      
      //
      return this;
    };
  
    var run = function(elements){
      $(elements).each(function(){
        if( $(this).prop("tagName") == 'A' ){
          _omit(this);
        }
      });
    };
  
    var _omit = function(a){
      text = $(a).text();
      var segments = _split(text);
      if( !segments ){ return; }
      
      $(a).empty();
      $(a).attr('data-expanted-url',text);
      
      var invisible = segments[1] + '://';
      var display = '';
      var ellipsis = '';
      if( segments[2].length > setting.length_front ){
        display += segments[2].slice(-setting.length_front) + '/';
        invisible += segments[2].slice(0,segments[2].length-setting.length_front);
        ellipsis = setting['tco-ellipsis'];
      }else{
        display += segments[2] + '/';
      }
      $(a).append(
        $('<span>').addClass('tco-ellipsis').text( ellipsis ),
        $('<span>').addClass('invisible').text( invisible )
      );
      
      invisible = '';
      ellipsis = '';
      if( segments[3].length > setting.length ){
        display += segments[3].slice(0,setting.length);
        invisible = segments[3].slice(setting.length);
        ellipsis = setting['tco-ellipsis'];
      }else{
        display += segments[3];
      }
      
      $(a).append(
        $('<span>').addClass('js-display-url').text( display ),
        $('<span>').addClass('invisible').text( invisible ),
        $('<span>').addClass('tco-ellipsis').append(
          $('<span>').addClass('invisible').html( ' ' ),
          ellipsis
        )
      );
      
    };
  
    var _split = function(url){
      var regex = /^(.+):\/\/(.+?)\/(.+)$/;
      var m = regex.exec(url);
      if( !m ){ return false; }
      return m;
    };
  
})(jQuery);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
goosyspro
0viewers