php,javascript共通正規表現まとめjqueryfindも。

2016年2月25日更新 view: 2471 view

正規表現をまとめてみました

まずは、基本の使い方からどうぞ。

検索

php

preg_match_all('/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/',"http://www.matomater.com/hoge/いい夢みろよhttp://www.yahoo.co.jp",$match);
print_r($match);//$str内の url のみを取得

javascript

<script type="text/javascript">
var m = "http://www.matomater.com/hoge/いい夢みろよhttp://www.yahoo.co.jp".match(/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/g);//gがなければ最初の一つのみにマッチ
alert(m);//マッチしたurlが配列で返る alert(m[0]);
</script>

後方で参照する場合は
var m = "ここに文字列".match(/<span>(.*)<\/span>/g);
console.log(RegExp.$1);

置換

php

$str = preg_replace('/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/','xxx','http://www.matomater.com/hoge/いい夢みろよhttp://www.yahoo.co.jp');
print_r($str);

javascript

<script type="text/javascript">
m= "http://www.matomater.com/hoge/いい夢みろよhttp://www.yahoo.co.jp".replace(/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/g,"xxx");//gがなければ最初の一つのみ置換
alert(m);
</script>

javascriptの場合、変数をマッチさせる場合は regexpを使う

str.replace(/ABC/g, 'chikan');
str.replace(new RegExp('ABC', 'g'), 'chikan');

javascriptの後方置換

coffeescriptですが。
これは str の ringo の aタグを削除してテキストにします。

str = "apple,<a href=\"yahoo\">ringo</a>,mikan"
        str1 = str.replace(/<a +.*?>(.*?)<\/a>/g, ->
          console.log arguments[1] # ringo
          console.log arguments[2] # 6
          console.log arguments[3] # apple,<a href="yahoo">ringo</a>,mikan
          arguments[1]
        )

        console.log str1 #apple,ringo,mikan

基本さえ覚えれば後は簡単ですね。続いてマッチするパターンを勉強します。

何にマッチさせますか？

以下、全てphp用で書きます。 javascriptで使いたい時もパターンを入れ替えるだけなので簡単です。

空じゃないか

preg_match('/[^\s]+/m',$str);

全て半角数字か

preg_match('/^[0-9]+$/',$str);

半角英小文字か

preg_match('/^[a-z]+$/',$str);

urlか

preg_match('/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/',$str);

メールアドレスか

携帯電話のドットが2つあるメールアドレスも通します

preg_match("/^[\w!#$%&'*+\/=?^_@{}\\|~-]+([\w!#$%&'*+\/=?^_{}\\|~\.-]+)*@([\w][\w-]*\.)+[\w][\w-]*$/",$str);

郵便番号か

preg_match("/^[0-9]{3}-[0-9]{4}$/",$str);

画像を抜き出す

preg_match('/<img.*?src=(["\'])(.+?)\1.*?>/i', $v['Article']['body'], $matches);
pr($matches);

小数点の数字も含む数字をすべて抜き出す

$tmp_money = '78.90円から1800円です。みたいな感じ。'

preg_match_all('/([0-9|\.]*)/',$tmp_money,$match);
$match = array_filter($match[0], "strlen");//空の配列を削除
$match = array_values($match);//空の配列の連番を振り直す

アンカーテキストを抜き出す

aタグの中身を抜き出すには？

preg_match('/<a.*?>(.*)<\/a>/i', $v->innertext, $matches);
pr($matches[1]);

画像ファイルのみ(js)

matches = cont.match(/http[s]?\:\/\/[\w\+\$\;\?\.\%\,\!\#\~\*\/\:\@\&\\\=\_\-]+(jpg|jpeg|gif|png|bmp)/g);

noscriptタグを除去

javascriptの場合は複数行マッチができないので、改行コードをすべて削除してからやる。

cont = $(this).html().replace(/\r\n|\r|\n/g, "");
//noscript除去
cont = cont.replace(/<noscript.*noscript>?/mg,'');

こんな所でしょうか。

今はcakephpやライブラリがあって正規表現を直接使う機会が少なくなってきました。でも時々使うときがあるので、そんなときのためにも覚えておいた方がいいですね。

phpで後方参照

>>103 のテキストすべてに a タグを付けたい場合の正規表現。

$res = preg_replace('/(&gt;&gt;([0-9]*))/','<a href="#a$2">$1</a>',$body);

まず、 $1 というのは、第一引数の () で囲ったものにマッチしたものを表示。( >>103 , >> 108)
$2 というのは第一引数の　２番めに囲った () にマッチしたものを表示。 (103 , 108)

で、 >> 103 を a103に、>>108を a108にとできるので、 >>1 は >> 103にマッチせずにすべて置換することができる。

正規表現の代わりに jquery find を使う

jquery find を使えば html解析に特攻！

テキストエリア hanbetu の中に入力した html から
aタグ、imgタグを抜き出す

まずはjs

//テキストエリア #hanbetu の中で何らかのキーをおした時
    $("#hanbetu").keypress(function (e) {
        
        //テキストエリア、テキストフィールドの場合は find が使えないので、一度 div に格納。
        //その際、dummy要素を作る。すでにあれば作らない。
        if(!$('#dummy').size()){
            $(this).append('<div id="dummy"></div>');
        }
        
        //dummy要素に $hanbetu の中身を格納
        $('#dummy').html($(this).val());
        
        //dummy要素の中の a タグ img タグ を調査。
        //a タグなら href を取得、テキストを取得。
        //img タグなら imgすべてを取得
        
        $.each($('#dummy').find('a,img'), function(i) {
            
            if($(this).get(0).tagName == 'A'){
                console.log($(this).attr('href'));//a タグの href を取得
                console.log($(this).text());//<a href="">[ ここのテキストを取得 ]</a>
            } else {
                console.log($(this)[0].outerHTML);//<img border="0" width="1" height="1" src="http://www.hogeman.com/hoge.gif" alt=""> を取得
            }
            
        });
    });

HTML

<textarea name="data[hanbetu]" class="span8" cols="30" rows="6" id="hanbetu" >&lt;a href=&quot;http://hogeman.com&quot; target=&quot;_blank&quot;&gt;ワールドサッカーコレクションS&lt;/a&gt;&lt;img border=&quot;0&quot; width=&quot;1&quot; height=&quot;1&quot; src=&quot;http://www13.hoge.net/0.gif?hoge=262LB7+1FSR6I+2WFG+5YJRM&quot; alt=&quot;&quot;&gt;</textarea>

div要素の場合はそのままできるが、textareaの中にあるhtmlは一度 div に格納してから find をかける。