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

  • 165
    いいね
  • 1
    コメント

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はとても良いものだ。
意外といつも使う関数ってそんなにないよね。