正規表現とjavascript文字列中に含まれるある文字の個数を返す

正規表現の話題になったからおさらいしたし、
100から200の数字を検索掛けるのに、正規表現で/[100-200]/ではないよな？？
と思ったので。。
おさらいをかねていい勉強になったわ
[javascript]
var str1 = 'わたしのサイトはhttps://kennjimoritattayahoo.co.jpですあなたのはhttps://watasshi.jpですね'
var reg1 = /http(s)?:\/\/([\w-]+.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
//
var result = str1.match(reg1);
for(i= 0;i<result.length;i++){
document.write(result[i]);
document.write('<br/>');
}
var p1 = /[1-2]+([0-9][0-9])/g;
var str2 = '100匹わんちゃん。\n7人の店主';
var p2 = /^[0-9]{3,}/g;
var result2 = str2.match(p2);
for(i=0;i<result.length;i++){
document.write(result2[i]);
}
//行頭にある1文字以上の数字を抽出
var reg2 = /^[0-9]{1,}/g;
var str3 = '1000ですが\n99にもなります';
var result3 = str3.match(reg2);
//["1000"]しか返さない
//マルチラインを付けると改行コード直後、文字列末尾も検索する
var reg2 = /^[0-9]{1,}/gm;
var str3 = '1000ですが\n99にもなります';
var result3 = str3.match(reg2);
//["1000","99"];

    var reg4 = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?&%=]*)?/g;
    var str4 = 'わたしはhttps://kennjimorita.jpです。';
    str4 += 'これhttps://korekore.jpもそうです';
    var result4 = reg4.exec(str4);
    for(i=0;i<result4.length;i++){
        document.write(result4[i]);
        document.write('<br>');
    }



//execメソッド
var reg = /wow/g;
var target= 'fafwwoweeeewowfefawow';
matches = [];
while(match = reg.exec(target)){
    matches.push(match);
};


// javascript文字列中に含まれるある文字の個数を返す
var counter = function(str,seq){
    return str.split(seq).length -1;
}
var str = 'mooooooorita';
var str2 = 'moooorita';
var str3 = 'efafeofafeofa'
console.log(str + ':' + counter(str,'o'));
console.log(str + ':' + counter(str2,'o'));
console.log(str + ':' + counter(str,/\d/));
console.log(str + ':' + counter(str,/[a-z]/));

[/javascript]

[javascript]
//コンストラクタクラス定義、インスタンス生成、プロトタイプ継承を使った関数を参照
var Menber = function(fname,sname){
this.fname = fname;
this.sname = sname;
};
Menber.prototype.me1 = function(){
return this.fname + this.sname;
}
Menber.prototype.me2 = function(){
return this.fname + this.sname;
}
var men1 = new Menber('morita','kenji');
var men2 = new Menber('kenji','kenji');

// オブジェクトリテラルでのprototype定義

    var Menber = function(fname,sname){
        this.fname = fname;
        this.sname = sname;
    }
    Menber.prototype = {
        add : function(){return this.fname + this.sname},
        add2 : function(){return this.sname + this.fname}
    };
    var men1 = new Menber('ff','ee');
    console.log(men1.add(),men1.add2());


    // プロトタイプチェーン
    var Animal = function(){};
    Animal.prototype = {
        walk : function(){document.write('tokotoko');}
    }
    var Dog = function(){};
    Dog.prototype = new Animal();
    Dog.prototype.bark = function(){document.write('baubau');}

    var d = new Dog();
    d.walk();
    d.bark();

[/javascript]

javascript　Ajax-スクロール値によるページ読み込み-

XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント全部調べる

javascript

XMLHttpRequestオブジェクトってどんなメソッドとかプロパティ持っているのかって思ったのでちょっと調べてみた。

利用可能なプロパティ

1 XMLHttpRequestUpload

利用可能なメソッド

利用可能なイベント

参照: JavaScript プログラミング講座

こちらはAjaxによるスクロールするとtxtファイルが読み込まれるコード
[javascript]
<script type="text/javascript">
var readingpart = 0;
window.addEventListener('load',
function(event){
var elem = document.getElementById('text');
elem.addEventListener('scroll',scrollText,false);
loadText();
},false);
function loadText(){
var req = new XMLHttpRequest();
req.open('GET','part' + (readingpart + 1) + '.txt');
req.onreadystatechange = function(event){
if(req.readyState == 4){
var text = document.getElementById('text');
if(req.status == 200){
text.innerHTML += req.responseText;
readingpart++;
}
}
};
req.send();
}
function scrollText(event){
var text = event.currentTarget;
var output = document.getElementById('output');
var ss = text.scrollHeight - text.scrollTop;
output.innerHTML =
'H' + text.clientHeight +
' SH:' + text.scrollHeight + ' ST:' + text.scrollTop +
' SS:' + ss;
if(ss <= text.clientHeight){
loadText();
}
};
</script>

[/javascript]

html

[html]
<div id="wrapper">
<h1>テキスト読み込み</h1>
<div id="text"></div>
<div id="output"></div>
</div>
[/html]

JSON

javascript

[javascript]
<script type="text/javascript">
window.addEventListener('load',
function(event){
var elem = document.getElementById('btn_load');
elem.addEventListener('click',loadJSON,false);
},false);
function loadJSON(){
var req = new XMLHttpRequest();
req.open('GET','prod_data.json');
req.onreadystatechange = function(event){
if(req.readyState == 4){
var div = document.getElementById('div_source');
if(req.status == 200){
div.innerHTML = req.responseText;
createTable(req.responseText); }
} else{
div.innerHTML = '読み込みエラー';
}
};
req.send();
};
function createTable(jsontxt){
var prod_data = eval('(' + jsontxt + ')');
var table = document.getElementById('prod_table');
var tbody = document.getElementsByTagName('tbody')[0];
for(var i = 0; i<prod_data.length; i++){
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = prod_data[i].name;
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML = prod_data[i].price;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
</script>

[/javascript]

html

[html]
<div id="wrapper">
<h1>テキスト読み込み</h1>
<input type="button" id="btn_load" value="読み込み"></button>
<div id="div_source"></div>
<table id="prod_table">
<tbody>
<thead>
<tr>
<th>製品名</th>
<th>価格</th>
</tr>
</thead>
</tbody>
</table>
</div>
[/html]

javascript-Ajax-

javascript

[javascript]
window.addEventListener('load',
function(event){
var elem = document.getElementById('btn_loadtext');
elem.addEventListener('click',loadText,false);
},false);
function loadText(event){
var req = new XMLHttpRequest();
req.open('GET','aozora.txt');
req.onreadystatechange = function(event){
if(req.readyState == 4){
var text = document.getElementById('text');
if(req.status == 200){
text.innerHTML = req.responseText;
}else{
text.innerHTML = '読み込みエラー';
}
}
};
req.send();
}
[/javascript]

html

[html]
<h1>テキスト読み込み</h1>
<input type="button" id="btn_loadtext" value="読み込み">
<div id="text"></div>

[/html]

    // var tar = document.getElementById("price")
    // var elem = tar.getElementsByTagName('p');
    // var tagleng = tar.getElementsByTagName('p').length;
    // var str =[],addEleme = '';
    // var re =[],result;
    // for(var i = 0;i<tagleng;i++){
    //  　addEleme += elem[i].innerHTML + ',';
    //  result = addEleme.replace(/([0-9]{3}),/g,',$1_');
    //   re = result.split('_');

// re.pop();
//最後の要素を取得して削除
// }
// re;

    // p要素に入っているtextNodeの値を全て取得
    // stringにする
    // 全てのそれに
    // 一番最後から数えて3番目の前にカンマをつける


    //正解
    // function numberFormat(source){
    //  var s = new String(source);
    //  var ret = '';
    //  for (var i = s.length-3; i>0;i-=3){
    //      ret = '.' + s.substr(i,3) + ret;
    //  }
    //  ret = s.substr(0,i+3) + ret;
    //  return ret;
    // }
    // document.write('合計金額は' + numberFormat(2895 * 5) +  'です');円
    // window.alart('保存しました');

var reg = new RegExp('^[0-9]');
reg.test('foo');
false
reg.test('123');
true
var reg = /'^[0-9]'/;
undefined
var reg = /'^[0-9]'/;
function RegExp(){

}
undefined
var reg = /'^[0-9]'/;
reg.constructor;

function RegExp() { [native code] }
var reg = /'^[0-9]'/g;
var reg = /^\s+/;
undefined
reg
/^\s+/
var reg = new RegExp('^\s+');
undefined
var reg = new RegExp('^\s+');
undefined
reg
RegExp {}
var text = 'abc def ghi jkl';
var reg = /(\w+)\s(\w+)/;
reg.exec(text);
["abc def", "abc", "def"]
var reg = /(\w+)\s(\w+)/g;
undefined
reg
/(\w+)\s(\w+)/g
var text = 'abc def ghi jkl';
undefined
reg.exec(text);
["abc def", "abc", "def"]
reg.exec(text);
["ghi jkl", "ghi", "jkl"]
reg.exec(text);
null
var text = 'moritakenji';
var result = text.search(/^kan/g);
result;
-1
var text = 'moritakenji';
var result = text.search(/^moirta/g);
result;
-1
var text = 'moritakenji';
var result = text.search(/^(moirta)/g);
result;
-1
var text = 'abc def ghi jkl';
text.replace(/\s/,',');
"abc,def ghi jkl"
var text = 'abc def ghi jkl';
text.replace(/\s/g,',');
"abc,def,ghi,jkl"
text.replace(/(.)\s/g,',$1');
"ab,cde,fgh,ijkl"
text.replace(/(.)\s/g,function(01m,02m){return ','+ 02m});
Uncaught SyntaxError: Unexpected token ILLEGAL VM50:732
text.replace(/(.)\s/g,function(m0,m1){return ','+ m1});
"ab,cde,fgh,ijkl"
var text = 'abc def ghi jkl';
undefined
text
"abc def ghi jkl"
text.match(/\w/g);
["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"]
text.match(/(w+)\s/g);
null
text.match(/(w)\s/g);
null
text.match(/(.)\s/g);
["c ", "f ", "i "]
text.match(/(.)\s/g);
["c ", "f ", "i "]
text.match(/([a-z]{,3})\s/g);
null
text.match(/([a-z]{3})\s/g);
["abc ", "def ", "ghi "]
text.match(/([a-z]{1,2})\s/g);
["bc ", "ef ", "hi "]
text.match(/([a-z]{0,1})\s/g);
["c ", "f ", "i "]
text.match(/([a-z]{3})\s/g);
["abc ", "def ", "ghi "]
text.match(/(\w+)\s(\w+)/g);
["abc def", "ghi jkl"]

再帰呼び出し
アクセサプロパティ
with()
apply call

var gloval;
var re = /(.)@(.+).(.)/;
var callback = function(){
gloval = arguments;
return arguments[1] + 'at' + arguments[2] + 'dot' + arguments[3];
}
'kennjirmotaitata@yahoo.co.jp'.replace(re,callback);
//"kennjirmotaitataatyahoo.codotjp"

var arry = [];
var csv = 'one, two, three';
var re = csv.replace(/\s/g,'');
arry.push(re);

/<(\S+)(?:\s+.+)?>/
//配列に含めないタグ正規表現

文字列の位置。sliceとsubstringの第二引数に-1を与えた場合

var s = 'moritakenji';
s.slice(0,5);
"morit"
s.slice(0,-1)
"moritakenj"
s.substring(0,-1)
""
s.substring(1,-1)
"m"

substr(0,3)
長さ

s.charAt(0)
位置にある文字を取得

全部とるにはslice(0,-1);

検索位置を返すstring.indexOf();
'moritakenji'.indexOf('o',2)//-1
'moritakenji'.indexOf('o') //1

.コールバック関数

3つある任意の数字を２倍にして配列で返す関数を実行した後、１を足す関数を実行
//失敗
function multi(a,b){
var arr = [];
for(var i in arguments){
var result = arry.push(i *2);
}
return result;
};
var result2 = multi(3,4);
result2

//見本
var i,arr = [];
function muliti(a,b,c){
for(i = 0;i<3;i++){
arr[i] = arguments[i] *2;
}
return arr;
};
function add(a){
return a + 1;
}
var my = [];
my = muliti(10,30,40);

for(var i = 0;i<3;i++){my[i] = add(my[i])};

ループをへらすことで実行コストを抑える。
１つのコードでやる。
コールバック関数を受け取るようにして繰り返しごとに関数を呼び出す
var my = [];
function muliti(a,b,c,callback){
var i,arr = [];
for(i= 0;i<3;i++){
arr[i] = callback(arguments[i] * 2);
}
return arr;
}
function add(a){
return a + 1;

}
my = muliti(2,3,5,add);

add()の代わりに無名関数を使うとグローバル関数を減らせることができる
var my = [];
function muliti(a,b,c,callback){
var i,arr =[];
for(i=0;i<3;i++){
arr[i] = callback(arguments[i] *2);
}
return arr;
}
my = muliti(2,3,5,function(a){return a + 1})

1

独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));//{name:'リラックスチェア',price:'4000'}
prod_data.push(new Product('リラックスデスク','12000'));//{name:'リラックスデスク',price:'12000'}
prod_data.push(new Product('ブックスタンド','800'));//{name:'ブックスタンド',price:'800'}
window.addEventListener('load',function(event){
    createTable();

},false);
//表作成関数
function createTable(){//HTMLの生成
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0;i<prod_data.length;i++){
        if(!(prod_data[i] instanceof Product)){
            continue;
        }
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        td.innerHTML= prod_data[i].name;
        tr.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = prod_data[i].price;
        tr.appendChild(td);
        tbody.appendChild(tr);
    }
}

2
//他の関数を作成する場合

//独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
    //コンストラクタに定義
    this.calcPrice1 = function(amount){
        return this.price * amount;
    }
}
//プロトタイプで共有
Product.prototype.calcPrice2= function(amount){
    return this.price * amount;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));
prod_data.push(new Product('リラックスデスク','12000'));
prod_data.push(new Product('ブックスタンド','800'));

window.addEventListener('load',function(event){
    createTable();

},false);
function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
    var str = '';
    for(var i= 0;i<value.length;i++){
        str += '<td>' + value[i] + '</td>';
    }
    return str;
}
//表作成関数
function createTable(){
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0; i < prod_data.length; i++){
        var tr = document.createElement('tr');
        tr.innerHTML = TableTool.createTdStr(
            [prod_data[i].name,
            prod_data[i].price,
            prod_data[i].calcPrice2(10),
            prod_data[i].calcPrice2(20),
            prod_data[i].calcPrice2(30)
            ]
        );
        tbody.appendChild(tr);
        }
    }

3

// オブジェクトの継承
//独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
}
Product.prototype.calcPrice = function(amount){
    return this.price * amount;
}
function HardProduct(name,price){//継承元と同じプロパティを定義する必要がある。そうしないとprototypeで継承元をたどってしまうから
    this.name = name;
    this.price = price;
    this.zaiko = 0;
}
HardProduct.prototype = new Product();//継承したいオブジェクト（継承元）のインスタンスを代入する

function SoftProduct(name,price){
    this.name = name;
    this.price = price;
}
SoftProduct.prototype = new Product();//継承はprototypeに対しての代入になる。これ逆にするとprototypeに対して追加していたメソッドが消えてしまう
SoftProduct.prototype.calcPrice = function(){
    return '---';
}
var prod_data = [];
prod_data.push(new HardProduct('リラックスチェア','4000'));
prod_data.push(new HardProduct('リラックスデスク','12000'));
prod_data.push(new HardProduct('ブックスタンド','800'));
prod_data.push(new SoftProduct('設置サービス','2800'));
prod_data.push(new SoftProduct('1年保証','5800'));
window.addEventListener('load',function(event){
    createTable();
},false);

function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
    var str = '';
    for(var i= 0;i<value.length;i++){
        str += '<td>' + value[i] + '</td>';
    }
    return str;
}
//表作成関数
function createTable(){
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0; i < prod_data.length; i++){
        if(!(prod_data[i] instanceof Product)){
            continue;
        }
        var tr = document.createElement('tr');
        tr.innerHTML = TableTool.createTdStr(
            [
            prod_data[i].name,
            prod_data[i].price,
            prod_data[i].calcPrice(10),
            prod_data[i].calcPrice(20),
            prod_data[i].calcPrice(30)
            ]
        );
        tbody.appendChild(tr);
        }
    }

<style> 
table{border:solid 1px orange;border-spacing:0px;}
th,td{border:solid 1px orange;padding: 4px}
</style>

新製品価格表

</table>

-->

2014年3月9日 kenjimorita JavaScript, web備忘録

javascript消費税8%関数(実際のコード付、消費税10%になった場合のjavascript関数も対応)

javascript消費税8%関数(実際のコード付、消費税10%になった場合のjavascript関数も対応)です。

よかったらコピペして使ってください。

javascript消費税8%関数のコード(下に実際に価格を入れてみて「計算」を押してください)

JS Bin on jsbin.com

inputに入れられた数値をcalcuに渡して1.08を乗算、小数点以下を丸めて(捨てて)返しています。返されたresultはそれをあらかじめ作られた要素のid取得してinnerHTMLとして代入しています。 htmlに埋め込んでありますので使うとき移行してください。 10%のが欲しかったらコード内の1.08を1.1に変更して使ってくださいね

javascript消費税8%関数が実際動作する様子

他のjavascript記事へ

TOPページへ

全記事リンク集

instagram Twitter Qiita github Youtube凝視おじさん