Edited at

Javascriptでよく使う処理をスニペットにしてみた

More than 1 year has passed since last update.

SnippetsLabにいつも使う関数まとめるついでにQiitaにもメモっとく。


汎用関数


Htmlタグを除去

/**

* Htmlタグを除去
* @param {string} str Htmlタグが含まれた文字列(<h1>サンプル文字列</h1>)
* @returns {string} Htmlタグ除去された文字列(サンプル文字列)
*/

const removeHtmlTag = function (str) {
return String(str).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
};


GET値を取得する

/**

* URLをパースしてGET値のオブジェクトにする
* @returns {{}} GET値のオブジェクトです。
*/

const purseQuery = function () {
const result = {};
const query = decodeURIComponent(location.search);
const query_ary = query.substring(1).split("&");
for (let item of query_ary) {
let match_index = item.search(/=/);
let key = "";
if (match_index !== -1) {
key = item.slice(0, match_index);
}
let value = item.slice(item.indexOf("=", 0) + 1);
if (key !== "") {
result[key] = value
}
}
return result
};


全角英数を半角英数にする

/**

* 全角英数を半角英数にする
* @param {string} str 全角英数(abc123)
* @returns {string} 半角英数(abc123)
*/

const convertHalfWidthToFullWidth = function (str) {
return String(str).replace(/[A-Za-z0-9]/g, e => {
return String.fromCharCode(e.charCodeAt(0) - 0xFEE0);
});
};


数値をカンマ区切りにしたり、しなかったり

/**

* 数値文字列にカンマ区切りにする
* @param {string} numberString 数値文字列。
* @returns {string} カンマ区切りの数値文字列
*/

const insertCommaDelimiter = function (numberString) {
return String(numberString).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
};

/**
* カンマ区切りの数値文字列を数値にする
* @param {string} numberString 数値文字列。
* @returns {number} カンマを取り除いた数値
*/

const removeCommaDelimiter = function (numberString) {
return Number(numberString.replace(/,/g, ''));
};


日付の整形

/**

* 日付文字列を整形してYYYY/mm/ddで返す
* @param {string} dateStr Dateがパースできる文字列 例:IEでDateTime型はパースできない
* @param {boolean} isDateTime DateTime方式にするか
* @returns {string} 整形した日時 "2017/01/01 00:00:00"
*/

const convertDateTime = function (dateStr, isDateTime) {

const now = new Date(dateStr);
// 年を取得
let year = now.getFullYear();
// 月を取得 0~11で取得されるので実際の月は+1したものとなる
let month = now.getMonth() + 1;
// 日を取得
let day = now.getDate();
// 時を取得
let hour = now.getHours();
// 分を取得
let minute = now.getMinutes();
// 秒を取得
let second = now.getSeconds();

// 日付時刻文字列のなかで常に2ケタにしておきたい部分はここで処理
// 1~9の数値場合"01"~"09"という文字にする
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
if (hour < 10) {
hour = "0" + hour;
}
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}

let datetime = year + "/" + month + "/" + day;
if (isDateTime) {
datetime += " " + hour + ":" + minute + ":" + second;
}
return datetime;
};


ブラウザ判定

/**

* userAgentからブラウザ判定
* @returns {string} ブラウザ名
*/

const getBrowserName = function () {
const ua = window.navigator.userAgent.toLowerCase();
let name = "unknown";
if (ua.indexOf("msie") !== -1) {
const ver = window.navigator.appVersion.toLowerCase();
if (ver.indexOf("msie 6.") !== -1) {
name = 'ie6';
} else if (ver.indexOf("msie 7.") !== -1) {
name = 'ie7';
} else if (ver.indexOf("msie 8.") !== -1) {
name = 'ie8';
} else if (ver.indexOf("msie 9.") !== -1) {
name = 'ie9';
} else if (ver.indexOf("msie 10.") !== -1) {
name = 'ie10';
} else {
name = 'ie';
}
} else if (ua.indexOf('trident/7') !== -1) {
name = 'ie11';
} else if (ua.indexOf('edge') !== -1) {
name = 'edge';
} else if (ua.indexOf('chrome') !== -1 && ua.indexOf('edge') === -1) {
name = 'chrome';
} else if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
name = 'safari';
} else if (ua.indexOf('opera') !== -1) {
name = 'opera';
} else if (ua.indexOf('firefox') !== -1) {
name = 'firefox';
}
return name;
};


キャメルケースとスネークケースの相互変換

/**

* _+小文字を大文字にする(例:_a を A)
* @param {string} str スネークケース(snake_to_camel)
* @returns {string} キャメルケース(snakeToCamel)
*/

const snakeToCamel = function (str) {
return String(str).replace(/_./g,
e => {
return e.charAt(1).toUpperCase();
}
);
};

/**
* 大文字を_+小文字にする(例:A を _a)
* @param {string} str キャメルケース(camelToSnake)
* @returns {string} スネークケース(snake_to_camel)
*/

const camelToSnake = function (str) {
return String(str).replace(/([A-Z])/g,
e => {
return '_' + e.charAt(0).toLowerCase();
}
);
};


UUIDっぽいものを生成

/**

* UUIDっぽいものを生成する関数
* @returns {string} UUID(550e8400-e29b-41d4-a716-446655440000)
*/

const getUuid = function () {
let uuid = "";
for (let i = 0; i < 32; i++) {
const random = Math.random() * 16 | 0;
if (i === 8 || i === 12 || i === 16 || i === 20) {
uuid += "-"
}
uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
}
return uuid;
};


バイト数整形

/**

* バイト数整形
* @param {number} byte_num バイト数値(1024)
* @returns {string} 整形したバイト文字列(1KB)
*/

const formatByteSizeUnits = function (byte_num) {
let byte_str = '0B';
if (byte_num >= 1099511627776) {
byte_str = (byte_num / 1099511627776).toFixed(2) + 'TB';
} else if (byte_num >= 1073741824) {
byte_str = (byte_num / 1073741824).toFixed(2) + 'GB';
} else if (byte_num >= 1048576) {
byte_str = (byte_num / 1048576).toFixed(2) + 'MB';
} else if (byte_num >= 1024) {
byte_str = (byte_num / 1024).toFixed(2) + 'KB';
} else if (byte_num >= 1) {
byte_str = byte_num + 'B';
}
return byte_str;
};


ブラウザとウェブページの横幅と高さを取得し、現在の位置を計算する

/**

* ブラウザの横幅取得
* @returns {number} ブラウザの横幅
*/

const getBrowserWidth = function () {
let width = 0;
if (window.innerWidth) {
width = window.innerWidth;
} else if (document.documentElement && document.documentElement.clientWidth !== 0) {
width = document.documentElement.clientWidth
} else if (document.body && document.body.clientWidth !== 0) {
width = document.body.clientWidth;
}
return width
};

/**
* ブラウザの高さ取得
* @returns {number} ブラウザの高さ
*/

const getBrowserHeight = function () {
let height = 0;
if (window.innerHeight) {
height = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight !== 0) {
height = document.documentElement.clientHeight;
} else if (document.body && document.body.clientHeight !== 0) {
height = document.body.clientHeight;
}
return height;
};

/**
* ウェブページ自体の横幅
* @returns {number} ウェブページ自体の横幅
*/

const getContentsWidth = function () {
const calc_array = [
document.body.clientWidth,
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.documentElement.clientWidth
];
const max_width = Math.max.apply(null, calc_array);
return max_width ? max_width : 0
};

/**
* ウェブページ自体の高さ取得
* @returns {number} ウェブページ自体の高さ
*/

const getContentsHeight = function () {
const calc_array = [
document.body.clientHeight,
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.documentElement.clientHeight
];
const max_height = Math.max.apply(null, calc_array);
return max_height ? max_height : 0
};

/**
* ブラウザの高さとウェブページの高さから現在の位置を計算する
* @returns {{}}
*/

const calculatePosition = function () {
/**
* ブラウザの高さ(px)
* @type {number}
*/

const browser_height = getBrowserHeight();

/**
* Webページの高さ(px)
* @type {number}
*/

const contents_height = getContentsHeight();

/*
* 下記のページ数処理がを行う際にブラウザの高さとコンテンツの高さが
* 取得できないとページ数計算が進まないので
* 取得できない場合はは処理しない
*/

if (!contents_height && !browser_height) {
return false
}

/**
* スクロールの上からの移動位置(px)
* @type {number}
*/

const scroll_top_value = window.pageYOffset ? window.pageYOffset : 0;

/**
* コンテンツの高さをブラウザの高さで割って、何ページあるか計算
* @type {number}
*/

const total_page_number = Math.floor(contents_height / browser_height);

/**
* 1ページの高さ計算
* @type {number}
*/

const page_height = contents_height / total_page_number;

/**
* 現在のスクロール位置がのコンテンツの何ページ目か取得
* @type {number}
*/

const page_number = function (t, s, p) {
// スクロール位置が特定のページの範囲にあればループからでる
for (let i = 1; i <= t; i++) {
const min_page_height = p * (i - 1);
const max_page_height = p * i;
if (
min_page_height < s &&
s < max_page_height ||
s === 0
) {
return i;
}
}
return 0;
}(total_page_number, scroll_top_value, page_height);

return {
browser_height: browser_height,
contents_height: contents_height,
scroll_top_value: scroll_top_value,
total_page_number: total_page_number,
page_number: page_number
}
};


終わりに

SnippetsLabはとても良いものだ。

意外といつも使う関数ってそんなにないよね。