備忘用。

JavaScript

textareaは ×textContent ○value

See the Pen Untitled by fujisystem (@fujisystem) on CodePen.

Named capturing group

See the Pen Named capturing group by fujisystem (@fujisystem) on CodePen.

Non-capturing group

See the Pen Non-capturing group by fujisystem (@fujisystem) on CodePen.

Jsのメソッド解析

# ECMAScript® 2022 Language Specification
https://tc39.es/ecma262/multipage/global-object.html

JsでEnumぽいの

ES6

const Suits = {
  HEART: Symbol('heart'),
  DIAMOND: Symbol('diamond'),
  SPADE: Symbol('spade'),
  CLUB: Symbol('club'),
  exsitsByKey: x => Object.keys(Suits).includes(x.toUpperCase()),
  exsits: x => Object.values(Suits).includes(x),
  getByCode: x => Object.entries(Suits).filter(([k, v]) => k === x.toUpperCase()).map(([k, v]) => v).find(v => v),
};

// Enums.
let dia = Suits.DIAMOND;
console.log( Suits.exsitsByKey(dia.description) ); // => true
console.log( Suits.exsits(dia) ); // => true
console.log( Suits.getByCode('diamond')?.description ); // => "diamond"
console.log( dia === Suits.getByCode('diamond') ); // => true

3桁カンマ付与

引数は数値型

const addCommas = n => new Intl.NumberFormat().format(n);

オプショナルチェーン演算子/Null合体演算子

const hogeJoho = [{'testCode':10}, {'testCode':20}];
const found = hogeJoho?.find(e => e.testCode === 10);
setData(found?.testCode ?? 'defaultValue');

querySelectorを$にする

$=document.querySelector.bind(document);
または
const $=e=>document.querySelector(e);

2次元配列をfalseで初期化

const getTwoDimensionalArray = w => h => [...Array(h)].map(() => Array(w).fill(false));

複数配列を初期化

var ary = Array.apply( null, Array(3) ).map( function(){ return 0 } );
console.log( ary );  // Array(3) [ 0, 0, 0 ] と表示

文字列から文字の配列を作成

var a3 = Array.from('Japan');
console.log(a3);  // [ 'J', 'a', 'p', 'a', 'n' ] と表示

(初心者向け) JavaScript 配列の作成と初期化から拝借。

自動更新(オートリロード)のブックマークレット

javascript:(function(){var T=prompt('更新間隔?(秒)','60');if(T&&!isNaN(T)){var F='<html><frameset rows="*,0"><frame src="'+location+'"><frame></frameset></html>';var W=open();with(W.document){write(F);close();}var H='<html><script>function R(){parent.frames[0].location="'+location+'";}setInterval("R()",'+T*1000+');</script></html>';with(W.frames[1].document){write(H);close();}}})();

Bookmarklet for ”Reload Every”
から拝借。

8桁のランダムな[0-9a-z]な文字列取得

Math.random().toString(36).slice(-8)

36進数(10文字+26文字)で0-9a-zな文字列を取得するらしい。

N桁の数字文字列取得（zero-padding）

function getZeroPadding( number, digits ){
  return ( Array( digits +1 ).join('0') + number ).slice( -digits );
}

String.prototype.padStart()なるものが「ECMAScript 2017 (ECMA-262)」からあるらしい。※IE以外。Edgeはいける。

console.log( '1'.padStart(2, "0") );

ファイルパスからファイル名取得 (Windows限定)

var isWindows = navigator.userAgent.match(/Win(dows )?NT /);
var fileSeparator = isWindows ? '\\' : '/';
function getFilename( path ) {
  return isWindows ? path.split( fileSeparator ).pop();
}

配列の最大値取得

Math.max.apply(null, [-100, 0, 3.14, 0xFF, 1000]);

IE11 印刷プレビュー

function printPreviewIE11(){
  if(document.body.insertAdjacentHTML == null) return;
  var sWebBrowserCode = '<object width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
  document.body.insertAdjacentHTML('beforeEnd', sWebBrowserCode);
  var objWebBrowser = document.body.lastChild;
  if(objWebBrowser == null) return;
  objWebBrowser.ExecWB(7, 1);
  document.body.removeChild(objWebBrowser);
}

ブラウザ判別（ブラウザ名取得）

function browser_name() {
  var userAgent = window.navigator.userAgent.toLowerCase();
  var appVersion = window.navigator.appVersion.toLowerCase();

  if (userAgent.indexOf("msie") > -1) {
    if (appVersion.indexOf("msie 6.0") > -1) {
      return "IE6";
    }
    else if (appVersion.indexOf("msie 7.0") > -1) {
      return "IE7";
    }
    else if (appVersion.indexOf("msie 8.0") > -1) {
      return "IE8";
    }
    else if (appVersion.indexOf("msie 9.0") > -1) {
      return "IE9";
    }
    else if (appVersion.indexOf("msie 10.0") > -1) {
      return "IE10";
    }
    else {
      return "Unknown";
    }
  }
  else if (userAgent.indexOf("trident/7.0") > -1) {
    return "IE11";
  }
  else if (userAgent.indexOf("edge") > -1) {
    return "Edge";
  }
  else if (userAgent.indexOf("firefox") > -1) {
    return "Firefox";
  }
  else if (userAgent.indexOf("opera") > -1) {
    return "Opera";
  }
  else if (userAgent.indexOf("chrome") > -1) {
    return "Google Chrome";
  }
  else if (userAgent.indexOf("safari") > -1) {
    return "Safari";
  }
  else {
    return "Unknown";
  }
}

jQuery

テーブルの見出し以外削除（初期化）

$("#table tr:gt(0)").remove();

セレクトボックス選択値取得

var hoge = $("#select option:selected").val();

セレクトボックス初期化

$("#select").val(0);
または
$("#select").children().remove();

チェックボックス判定

if ( $("#check").prop('checked') ){
}

DOMツリー構築が完了と同時に実行（≒body onLoad）

$(function(){
});

配列の存在確認

if ( $.inArray("hoge", ["hoge", "foo"] ) !== -1 ){
}

ローカル実行時のファイルダウンロード

var text = "テストテキスト";
var blob = new Blob([text], {type: "text/plain"});  // バイナリデータ作成

// IEか他ブラウザかの判定
if(window.navigator.msSaveBlob)
{
    // IEなら独自関数
    window.navigator.msSaveBlob(blob, "ファイル名.txt");
} else {
    // それ以外はaタグ利用
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = 'ファイル名.txt';
    a.click();
    document.body.removeChild(a);
}

toolバーのarea固定

$(window).on('load',function(){
  if($("#tools").length > 0){
    var tool = $("#tools");
    var area = $(".main-text");
    var offset = tool.offset();
    var myLeft = offset.left;
    var myTop = offset.top;
    $(window).scroll(function(){
      // 高さ取得
      var toolBottom = tool.height() + $(this).scrollTop();
      var areaBottom = area.offset().top + area.height();
      if($(window).scrollTop() > myTop) {
        if(areaBottom < toolBottom){ // 指定エリアより下
          tool.css({
            "position":"absolute",
            "top":"auto",
            "bottom":"0",
            "right":"0"
          });
        } else { // 指定エリア内は固定
          tool.css({
            "position":"fixed",
            "top":"0",
            "bottom":"auto",
            "right":"auto",
            "margin-left":"645px" // 756-48-63
          });
        }
      } else { // 指定エリアより上
        tool.css({
          "position":"absolute",
          "top":"0",
          "bottom":"auto",
          "right":"0"
        });
      }
    });
  }
});