☰

Show Character Codes

Display a popup showing the character code(s) of the selected character(s) (max. 100 characters; configurable). This script is instended to be used as a bookmarklet using this URL: javascript:scc_ujs()

当前为 2018-02-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Show Character Codes
  3. // @namespace    https://greasyfork.org/en/users/85671-jcunews
  4. // @version      1.0.1
  5. // @license      AGPL v3
  6. // @description  Display a popup showing the character code(s) of the selected character(s) (max. 100 characters; configurable). This script is instended to be used as a bookmarklet using this URL: javascript:scc_ujs()
  7. // @author       jcunews
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. window.scc_ujs = function(maxTextLength, wspaces, txt, ei, a, b, i, c, o, d, e) {
  13.  
  14.   //===== CONFIG START =====
  15.  
  16.   maxTextLength = 100;
  17.  
  18.   //===== CONFIG END =====
  19.  
  20.   function zerolead(s, l) {
  21.     return ("0").repeat(l - s.length) + s;
  22.   }
  23.  
  24.   function hex(n, h) {
  25.     h = n.toString(16).toUpperCase();
  26.     if (n <= 0xff) {
  27.       return zerolead(h, 2);
  28.     } else if (n <= 0xffff) {
  29.       return zerolead(h, 4);
  30.     } else return zerolead(h, 8);
  31.   }
  32.  
  33.   if (!(txt = getSelection().toString()) || document.querySelector('div.showCharCode[id^="scc"]')) return;
  34.   ei = "scc" + (new Date()).getTime();
  35.   a = document.createElement("DIV");
  36.   a.id = ei;
  37.   a.className = "showCharCode"
  38.   a.innerHTML = `
  39. <style>
  40. #${ei} * {
  41.   opacity:1!important; visibility:visible!important;
  42.   position:static!important; z-index:auto!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; float:none!important;
  43.   margin:0!important; vertical-align:baseline!important;
  44.   border:none!important; padding:0!important; width:auto!important; height:auto!important; overflow:visible!important;
  45.   background:transparent!important; text-align:left!important; text-decoration:none!important; color:#000!important;
  46.   font:normal normal normal 16pt/normal sans-serif!important; cursor:auto!important;
  47. }
  48. #${ei}, #${ei} .curtain {
  49.   display:block!important; position:fixed!important; z-index:999999996!important; left:0!important; top:0!important; right:0!important; bottom:0!important;
  50. }
  51. #${ei} .curtain {
  52.   opacity:.3!important; z-index:999999997!important; background:#000!important; cursor:pointer!important;
  53. }
  54. #${ei} .dialog {
  55.   display:block!important; z-index:999999998!important; visibility:visible!important;
  56.   position:absolute!important;
  57.   padding:10px 10px 0 10px!important; border:5px solid #55b!important; border-radius:10px!important;
  58.   max-height:90%!important; overflow-y:scroll!important; background:#fff!important;
  59. }
  60. #${ei} label {
  61.   margin-right:2ex!important; cursor:pointer!important;
  62. }
  63. #${ei} label:last-child {
  64.   margin-right:0!important;
  65. }
  66. #${ei} table {
  67.   margin:10px 0!important;
  68. }
  69. #${ei} th {
  70.   padding:0 1ex!important; background:#000!important; text-align:center!important; color:#fff!important;
  71. }
  72. #${ei} table.no1Bytes .bytes1 {
  73.   display:none!important;
  74. }
  75. #${ei} table.no2Bytes .bytes2 {
  76.   display:none!important;
  77. }
  78. #${ei} table.no4Bytes .bytes4 {
  79.   display:none!important;
  80. }
  81. #${ei} table.noWSpaces .wspace {
  82.   display:none!important;
  83. }
  84. #${ei} td {
  85.   padding:0 1ex!important; background:#ddd!important;
  86. }
  87. #${ei} td:first-child {
  88.   position:relative!important; text-align:center!important;
  89. }
  90. #${ei} td:first-child:hover:after {
  91.   position:absolute!important; z-index:999999999!important; top:-.54em!important;
  92.   border: 2px solid #007; border-radius:10px!important; padding:0 .11em!important; background:#fff!important;
  93.   font-size:80px; content:attr(char);
  94. }
  95. #${ei} tr:nth-child(2)~tr td:first-child:hover:after {
  96.   top:-.89em!important;
  97. }
  98. #${ei} td+td {
  99.   text-align:right!important;
  100. }
  101. </style>
  102. <div class="curtain"></div>
  103. <div class="dialog">
  104.   <div style="white-space:nowrap!important">
  105.     <label for="${ei}1bytes"><input id="${ei}1bytes" type="checkbox" checked /> 1-Byte</label>
  106.     <label for="${ei}2bytes"><input id="${ei}2bytes" type="checkbox" checked /> 2-Bytes</label>
  107.     <label for="${ei}4bytes"><input id="${ei}4bytes" type="checkbox" checked /> 4-Bytes</label>
  108.     <label for="${ei}wspaces"><input id="${ei}wspaces" type="checkbox" /> White-Spaces</label>
  109.   </div>
  110.   <table class="noWSpaces">
  111.     <tr><th>Char</th><th>Hex</th><th>Dec</th><th>UTF-16 Codes</th><th>UTF-8 Codes</th></tr>
  112.   </table>
  113. </div>
  114. `;
  115.   a.children[1].addEventListener("click", function() {
  116.     a.remove();
  117.     document.documentElement.style.overflow = "";
  118.   }, true);
  119.   b = a.lastElementChild.lastElementChild;
  120.   a.querySelector("#" + ei + "1bytes").addEventListener("click", function() {
  121.     b.classList.toggle("no1Bytes");
  122.   }, true);
  123.   a.querySelector("#" + ei + "2bytes").addEventListener("click", function() {
  124.     b.classList.toggle("no2Bytes");
  125.   }, true);
  126.   a.querySelector("#" + ei + "4bytes").addEventListener("click", function() {
  127.     b.classList.toggle("no4Bytes");
  128.   }, true);
  129.   a.querySelector("#" + ei + "wspaces").addEventListener("click", function() {
  130.     b.classList.toggle("noWSpaces");
  131.   }, true);
  132.   wspaces = "\t\n\r \u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u202f\u205f\u3000\ufeff";
  133.   i = 0;
  134.   while (i < txt.length) {
  135.     d = txt.codePointAt(i);
  136.     (e = (o = b.insertRow()).insertCell()).textContent = c = String.fromCodePoint(d);
  137.     e.setAttribute("char", c);
  138.     if (c.length === 1) {
  139.       o.className = ((c.charCodeAt(0) > 0xff) ? "bytes2" : "bytes1") + (wspaces.indexOf(c) >= 0 ? " wspace" : "");
  140.     } else o.className = "bytes4";
  141.     o.insertCell().textContent = "0x" + hex(d);
  142.     o.insertCell().textContent = d;
  143.     o.insertCell().textContent = c.split("").reduce(
  144.       function(p, c) {
  145.         p.push(hex(c.charCodeAt(0)));
  146.         return p;
  147.       }, []
  148.     ).join(",");
  149.     o.insertCell().textContent = unescape(encodeURIComponent(c)).split("").map(
  150.       function(w) {
  151.         return hex(w.charCodeAt(0));
  152.       }
  153.     ).join(",");
  154.     i += c.length;
  155.   }
  156.   document.body.appendChild(a);
  157.   c = b.parentNode;
  158.   c.style.cssText =
  159.     "left:" + Math.floor((innerWidth - c.offsetWidth) / 2) + "px!important;" +
  160.     "top:" + Math.floor((innerHeight - c.offsetHeight) / 2) + "px!important";
  161.   document.documentElement.style.overflow = "hidden";
  162. };