タグ別アーカイブ: replace

ページ内URLの自動リンク

今回はクライアントからの相談について事前調査です。
内容としては以下の内容になります。
 「サイトにて利用者が入力した内容についてURL が入力されている場合には自動的にリンクにして欲しい」

おおよそ、正規表現を使用するのかとは思うのですが・・・
とりあえずはやってみましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                var regex   = /((https?):\/\/[\x21-\x7e]+)/ig;
                var targetTxt;
                var setTxt;

                $('#btn').click( function() {

                    targetTxt = $('#disp').html();
                    setTxt    = targetTxt.replace( regex, '<a href="$1">$1</a>' );

                    $('#disp').html( setTxt );
                    $('#button_area').hide();

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <div id="disp">
                rss version="2.0"
                xmlns:content="http://purl.org/rss/1.0/modules/content/"
                xmlns:wfw="http://wellformedweb.org/CommentAPI/"
                xmlns:dc="http://purl.org/dc/elements/1.1/"
                xmlns:atom="http://www.w3.org/2005/Atom"
                xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
                xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
                
                title JSource /title 
                atom:link href="http://jsource.nakweb.com/?feed=rss2" rel="self" type="application/rss+xml" /
                link http://jsource.nakweb.com /link
                link https://jsource.nakweb.com /link
                description ~ Javascript 備忘録 ~ /description 
                lastBuildDate Sat, 03 Sep 2016 23:15:47 +0000 /lastBuildDate 
                language ja /language
                sy:updatePeriod hourly /sy:updatePeriod
                sy:updateFrequency 1 /sy:updateFrequency
                generator https://wordpress.org/?v=4.5.4 /generator
            </div>
        </div>

        <div id="button_area">
            <button id="btn">Click</button>
        </div>

    </body>
</html>

sample

sample を表示すると適当な文言と Button が表示されます。
Button を Click すると正規表現に設定した条件の部分に a tag を挿入します。

実際の正規表現については「http」か「https」で始まる内容を対象とします。
また 16新数での「x21(!)」から「x7e(~)」までの文字列が続くものが対象です。
簡単に言うと「半角英数字(スペースや特殊な制御文字は除く)」になるかなと思います。

本当はもっと詳しく設定もできるのでしょうが、そこまで詳しくする必要はないかなぁ
とも思っています。
もっと詳しくする場合には改めて再考します(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

数字の標記編集(3桁毎のカンマ区切り)

今回はお仕事ネタです。
お仕事の内容は「入力した数字を計算して出力」と云った内容です。
今回はその機能を作る際に出された以下の条件に関してです。
 1. 全角の数字が入っていても半角に変換して表示して欲しい。
 2. 表示する数値の3桁毎にカンマ(,)を付けて欲しい。

とりあえずやってみましょう。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                $('#button').click(function() {

                    var numVal;
                    numVal = $('#input_num').val();
                    
                    $('#dsip_num').empty();

                    // Input Check
                    if (numVal == '') {
                        $('#disp_num').text('Error : No input').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Replace
                    numVal = numVal.replace(/[0-9]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
                    if (!(numVal.match(/^[0-9]+$/))) {
                        $('#disp_num').text('Error : No numeral').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Set Comma
                    numVal = String(numVal).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
                    $('#disp_num').text(numVal).css({'background-color':'#00ff00'});

                })

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div#main_area {
                margin      : 10px;
            }

            div#num_area {
                margin-top  : 20px;
            }

            #disp_num {
                padding     : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input id="input_num" />
            <button id="button">Set Comma</button>
            <div id="num_area"><span id="disp_num"></span></div>
        </div>

    </body>
</html>

sample

sample の text に数字(半角・全角)を入力して buttom を click すると入力した値を
半角数字にした上で「comma(,)」を追加して表示します。

うん、しっかり動きますね。
どちらも replace 関数を使用しています。
全角から半角の処理の場合は、対象の文字コードを半角の文字コードに置き換える形です。
また、カンマは数字の後ろが「数字 3文字が続き 且つ 4文字目が数字ではない文字列」の場合、
最初の数字にカンマを追加して表示しています。
・・・正規表現を文字にすると説明にくいですね。

まぁ、これで全角から半角への変換と3桁のカンマ区切りの処理が出来ました。
これでカンマ追加は怖くないですね(笑)

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

色情報の表記変更

前回「簡易カラーピッカー」を作成しました。
後から確認したところ $(this).css(‘background-color’); で背景色を取得した場合、
ブラウザによって取得する文字列が異なるようです。

取得内容をそのまま背景色に設定する分には問題ないのだと思います。
しかし、文字列を表示する場合はクロスブラウザ対策をしないといけないようです。

ということで今回は色情報取得時のクロスブラウザ対策をしてみます。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {

                var colorData;
                var colorChangeData;
                // Color List Display
                function SetColorList(type) {
                    // Color List Clear
                    $('#select_area').empty;

                    // rData
                    for (var r=0; r<16; r = r + 2) {
                        // gData
                        for (var g=0; g<16; g = g + 2) {
                            // bData
                            for (var b=0; b<16; b = b + 2) {
                                // Color Set
                                colorData = parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
                                $('#select_area').append('<div class="color_box" style="background-color:#' + colorData + ';"></div>');
                            }
                        }
                        $('#select_area').append('<div class="float_both"></div>');
                    }

                    // Color Click
                    $('.color_box').click(function (e) {
                        // Get Color Data
                        colorData = $(this).css('backgroundColor');
                        // Date Set
                        $('#color_disp span').replaceWith('<span>' + colorData + '</span>');
                        $('#color_disp').css('backgroundColor', colorData);

                        // New
                        colorChangeData = '';
                        if (colorData.substr(0,1) == '#') {
                            // Opera (#ffffff)
                        } else {
                            // Etc (rgb(255, 255, 255))
                            // 
                            colorData = colorData.replace('rgb(', '');
                            colorData = colorData.replace(')', '');
                            //
                            arrColor  = colorData.split(',');
                            for (var cnt=0; cnt<=2; cnt++) {
                                arrColor[cnt] = parseInt(arrColor[cnt]).toString(16);
                                if (arrColor[cnt].length < 2) {
                                    arrColor[cnt] = '' + '0' + arrColor[cnt];
                                }
                            }
                            colorChangeData = '#' + arrColor[0] + arrColor[1] + arrColor[2];
                        }
                        $('#color_text span').replaceWith('<span><p>' + colorData + '</p><p> ↓ Change</p><p>' + colorChangeData + '</p></span>');

                    });

                }

                // init
                SetColorList();

            });
        --></script>
         
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #disp_area p {
                padding          : 10px;
            }

            #select_area {
                margin           : 10px;
                padding          : 20px;
            }

            .color_box {
                float            : left;
                height           : 15px;
                width            : 15px;
                margin           : 0;
                padding          : 0;
            }

            .float_both {
                clear            : both;
            }

        --></style>
         
    </head>
    <body>
        <div id="select_area">
        </div>
        <div id="disp_area">
           <div id="color_disp">
               <span></span>
           </div>
           <div id="color_text">
               <span></span>
           </div>
        </div>
    </body>
</html>

sample

sanple 内容は基本的に 「簡易カラーピッカー」 のままです。
但し、色を選択したときの取得文字列を #ffffff での表示に変更しました。

今回のクロスブラウザ対策は以下の状況を共通の形式にするための処理です。
例)
■取得時
 Opera #ffffff
 その他 rgb(255,255,255)
 ↓
■返還後
 全ブラウザ #ffffff

正直 Opera 利用者の割合とか考えると必要かなぁとは思います。
ですが Opera 対策というよりも #ffffff の形式のほうが好みなので対応したほうがいいですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。