【javascript】正規表現について

HTML/CSS/JavaScriptを扱っている方の為のコミュニティです。

色んな疑問や質問を皆で解決していきましょう!

※最初はjQuery限定のコミュでしたが、jQueryはJavaScriptのライブラリであり、
また、HTML/CSSも深く関わってくるので全部一つのコミュにまとめました。
フォーラム(掲示板)ルール
一般常識さえ守れば、どんなスレでも立てていただいて構いません。

常識外れの投稿やスレを見つけた場合は、私の判断で削除いたします。

スレ立てるまでもない、簡単な質問は、
「スレ立てるまでもない質問」のスレッドに投稿して下さい。

基本的には、一つの質問につき1つのスレッドを立てていただて構いません^^
返信
アバター
Ciel
記事: 252
登録日時: 8年前

【javascript】正規表現について

#1

投稿記事 by Ciel » 8年前

お世話になります。

本当に何度も申し訳ないのですが、ある文字列を正規表現で表現できずに困っています。

対象の文字列は↓のようなものです。

【先頭文字】<div class='readspace'>【大量文字】</div><br>

【先頭文字】という部分に大量の文字列があり、その後に、<div class='readspace'という文字列があったあと、
【大量の文字】と言う部分に、大量の文字列があり、
その後に</div><br>という文字列があって、おわるという文字列です。

この文字列の中から、<div class='readspace'>~</div><br>までの文字列を取得したいのです。

で、私が考えたのが↓なのですが、これだとnullが帰ってきてしまいます。

str.match(/<div\ class=\'readspace\'>.+<\/div><br>$/));

どこが間違っているのか、ご教示願います。

javascriptでの正規表現ですので、間違えないでください。

まだ正規表現は慣れてないので根本的に間違っていたらすいません。
oui C'est la Vie♪

アバター
kimuchi
記事: 163
登録日時: 8年前
住所: 東京

Re: 【javascript】正規表現について

#2

投稿記事 by kimuchi » 8年前

閉じ括弧が一つ多い気がします。
此方の環境では、

コード:

<テスト文字列>
  "【先頭文字】<div class='readspace'>【大量文字】</div><br>"
<テストコード>
  1. str.match(/<div\ class=\'readspace\'>.+<\/div><br>$/);
  2. str.match(/<div\ class=\'readspace\'>.+<\/div><br>/);
  3. str.match(/<div\ class=\'readspace\'>.*<\/div><br>/);
<出力結果>
  "<div class='readspace'>【大量文字】</div><br>"
となりました。

追記:
ご存じかとは思われますが、「*」は0回以上一致を示します。

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【javascript】正規表現について

#3

投稿記事 by Ciel » 8年前

kimuchi さんが書きました:閉じ括弧が一つ多い気がします。
此方の環境では、

コード:

<テスト文字列>
  "【先頭文字】<div class='readspace'>【大量文字】</div><br>"
<テストコード>
  1. str.match(/<div\ class=\'readspace\'>.+<\/div><br>$/);
  2. str.match(/<div\ class=\'readspace\'>.+<\/div><br>/);
  3. str.match(/<div\ class=\'readspace\'>.*<\/div><br>/);
<出力結果>
  "<div class='readspace'>【大量文字】</div><br>"
となりました。

追記:
ご存じかとは思われますが、「*」は0回以上一致を示します。

kimuchiさん、ありがとうございます。

括弧が一つ多かったのは、alert関数でついでにメッセージを出していたんですが、
そのときの括弧を消しわすれていただけですので、それが原因ではありませんでした。

色々試行錯誤してたんですが、大量の文字列があるなかに一部、改行が混ざっていたようです。
「.」ドットは改行コード以外の文字を表すので、改行が有る場合はうまくひっかからなかったようです。

今度はちょっと実際の文章を貼った方が良さそうですね。

今度からはもうちょっとわかりやすいように質問させていただきます。

ありがとうございました^^
oui C'est la Vie♪

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【javascript】正規表現について

#4

投稿記事 by Ciel » 8年前

サウスさんに最高のアドバイスを思ったので記録しておく。

[\s\S]*で改行文字も任意の文字もすべて表すことができる。

以上。
oui C'est la Vie♪

アバター
kimuchi
記事: 163
登録日時: 8年前
住所: 東京

Re: 【javascript】正規表現について

#5

投稿記事 by kimuchi » 8年前

貴重な情報をありがとうございます。
特に此方の参考書では『「.」は任意の文字列と一致』としか書かれていなかったので、
具体的に改行文字を含まないということを理解でき、とても助かりました。

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【javascript】正規表現について

#6

投稿記事 by Ciel » 8年前

kimuchiさん。

いえいえ、こちらこそいつも助かっています。

さっき貼り付けた[\s\S]*ですが、逆に改行文字が含まれていない場合は
任意の文字が任意の数だけある条件にはマッチしないようです。私の勘違いでなければですが(笑)
その場合は普通にドットを使って、.*だけで表現できました。

なので、改行文字を「含む」任意の文字を表したいとき「だけ」[\s\S]*を使うようにして、
改行文字を含まなければ、.*を使うようにすればよいとおもいます。

勘違いでしたらすいません><
oui C'est la Vie♪

アバター
kimuchi
記事: 163
登録日時: 8年前
住所: 東京

Re: 【javascript】正規表現について

#7

投稿記事 by kimuchi » 8年前

>>[\s\S]*
「[]」内の文字「\s,\S」のいずれかが0回以上一致(論理和)
なので、改行有り無し、文字の有り無しにかかわらず、改行文字も任意の文字もすべて表すことができると思います。
検証もしてみたところ、どの場合でもうまくいきました。
(環境の違いでしょうか?)

それよりも気になることがあるのですが、スレの始めに書かれている「対象の文字列」はどのように取得しているのでしょうか?
検証用の改行を含む文字の取得をdocument.getElementById(*).innerHTMLで行ったのですが、
タグが中に含まれると、タグのシングルクォーテーションがダブルになったり、小文字が大文字になったりします。

実例:

コード:

/* HTML */
<div id="test">
sample<div class='readspace'>sample</div><br>
</div>
<script type="text/javascript">
var str;
str = document.getElementById("test").innerHTML;
alert(str);
</script>

/* 出力結果 */
//IE
  "sample<DIV class=readspace>sample</DIV><BR>"
//Firefox
  "sample<div class="readspace">sample</div><br>"
このため検証では
str.match(/<div\ class=readspace>[\s\S]*<\/div><br>/i);
のようにコードを変更して実行しました。
以上のことについて何かご存知ありませんか?
場合によってはこれが[\s\S]*の結果の違いの要因であるかもしれません(^^;)

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【javascript】正規表現について

#8

投稿記事 by Ciel » 8年前

kimuchi さんが書きました:>>[\s\S]*
「[]」内の文字「\s,\S」のいずれかが0回以上一致(論理和)
なので、改行有り無し、文字の有り無しにかかわらず、改行文字も任意の文字もすべて表すことができると思います。
検証もしてみたところ、どの場合でもうまくいきました。
(環境の違いでしょうか?)

それよりも気になることがあるのですが、スレの始めに書かれている「対象の文字列」はどのように取得しているのでしょうか?
検証用の改行を含む文字の取得をdocument.getElementById(*).innerHTMLで行ったのですが、
タグが中に含まれると、タグのシングルクォーテーションがダブルになったり、小文字が大文字になったりします。

実例:

コード:

/* HTML */
<div id="test">
sample<div class='readspace'>sample</div><br>
</div>
<script type="text/javascript">
var str;
str = document.getElementById("test").innerHTML;
alert(str);
</script>

/* 出力結果 */
//IE
  "sample<DIV class=readspace>sample</DIV><BR>"
//Firefox
  "sample<div class="readspace">sample</div><br>"
このため検証では
str.match(/<div\ class=readspace>[\s\S]*<\/div><br>/i);
のようにコードを変更して実行しました。
以上のことについて何かご存知ありませんか?
場合によってはこれが[\s\S]*の結果の違いの要因であるかもしれません(^^;)
kimuchiさん、何か色々すいません^^;

対象の文字列はXMLHttpRequestを使って、PHP側から受信したデータをそのまま、match関数にかけてます。

PHP側では、

"<div class='newpost'><div class='threadno'>$post</div><div class='title'>$subject</div><div class='name'>$name</div><div class='posttime'>$time</div><div class='updatetime'>$time</div></div>";

のように文字列を作って、echo関数を使いJS側でその文字列を受け取るようにしています。
JS側では、XMLHttpRequestオブジェクトがhttpという変数だとすると、
http.responseTextプロパティへアクセスし、http.responseText.match(正規表現)みたいな感じでチェックしています。
それと、私は大文字小文字を区別したいので、iオプションは使っていません。

この方法で改行コードが含まれていない文字列のチェックを[\s\S]+で行った場合に、何故かマッチしませんでした。
変わりに.+で行うとマッチしました。
その文字列はすぐ用意できないので、時間があった時にでもまた貼りますw
ちなみに、ただ単に改行のない文字列を作って、マッチングした場合には[\s\S]+でもマッチしました。
http.responseTextの時だけ何か特殊なんでしょうかねぇ?w


で、ダブルクオートや大文字小文字になったりする件ですが、これは私もわかりませんw
他にも変なことがありまして、
↓のコードをそのままhtmlファイルの中に貼り付けて実行していただくと分かるんですが、
なぜか、戻り値の文字列の最後に「,」カンマがくっついてきてしまうんですよw

<script type="text/javascript">
alert("【【先頭文字列】<div class='readspace'>\n【大量文字列】\n</div><br>".match(/<div class='readspace'>(.|\n)+<\/div><br>$/));
</script>

対象の文字列の中にカンマなんて存在してないのに、くっついてくるのでなんかのバグなんでしょうかねぇw
kimuchiさんの不具合もその一種なのかもしれませんが、ちょっと私には原因は分からないです。
oui C'est la Vie♪

アバター
kimuchi
記事: 163
登録日時: 8年前
住所: 東京

Re: 【javascript】正規表現について

#9

投稿記事 by kimuchi » 8年前

すみません。返信遅れました。
kimuchiさん、何か色々すいません^^;
こちらも好きでやっていることなのでお気になさらないで下さい(^^;)
むしろ付き合わせてしまって申し訳ないです。
対象の文字列はXMLHttpRequestを使って、PHP側から受信したデータをそのまま、match関数にかけてます。
なるほど!Ajax通信のデータでしたか。
responseTextは完全なプレーンテキストなので文字列に改変がないはずです。(此方も実証しました)
innerHTMLはHTMLデータということでテキストデータではないのが原因かもしれません。
タグが中に含まれると、タグのシングルクォーテーションがダブルになったり、小文字が大文字になったりします。
この状況に近いものがあったのでよろしければ。↓
http://www2s.biglobe.ne.jp/~iryo/vba/IE/hdata1.html
IEとFirefoxで挙動が違うというのも頭が痛いです。
この方法で改行コードが含まれていない文字列のチェックを[\s\S]+で行った場合に、何故かマッチしませんでした。
変わりに.+で行うとマッチしました。
ちなみに、ただ単に改行のない文字列を作って、マッチングした場合には[\s\S]+でもマッチしました。
http.responseTextの時だけ何か特殊なんでしょうかねぇ?w
改行コードというと「\n」のことですよね?(間違ってたらすみません)
此方の実験では「[\s\S]+」「[\s\S]*」「.+」のいずれでも正常にマッチしました。
念のため使用コードを載せておきます。

コード:

	
	//XhrObjの取得
	var xhrObj = getXhrObj();
	var str;

	xhrObj.open("post","read.php",false);
	xhrObj.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=Shift_JIS");
	xhrObj.send(null);
	str = xhrObj.responseText;
	alert(str);
	str = str.match(/<div class='readspace'>[\s\S]+<\/div><br>$/);/**/
	alert(str);

コード:

<?php
$kiroku = file_get_contents("test.txt");
header("Content-Type: text/plain; charset=Shift_JIS");
echo $kiroku;
?>

コード:

//1.
【先頭文字】<div class='readspace'>【大量文字】</div><br>
//2.
【先頭文字】<div class='readspace'>【大量\n文字】</div><br>
//3.
【先頭文字】<div class='readspace'>【大量
文字】</div><br>
//4.
【先頭文字】<div class='readspace'>【大量
\n文字】</div><br>
なぜか、戻り値の文字列の最後に「,」カンマがくっついてきてしまうんですよw
本当ですねw全く原因が分かりませんが。

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【javascript】正規表現について

#10

投稿記事 by Ciel » 8年前

kimuchiさん、色々テストしていただいてありがとうございます。

>>改行コードというと「\n」のことですよね?(間違ってたらすみません)
そうです、\nのことです。

kimuchiさんのテストコードを借りて、調べた結果、
改行コードがあった場合では、「.+」以外では全てマッチしました。
改行コードがない場合では、「[\s\S]+」「[\s\S]*」「.+」で全てマッチしました。

ですが、やはりサーバ上で行うと、
改行コードがない場合では「[\s\S]+」「[\s\S]*」ではマッチせず、「.+」じゃないとマッチしませんでした。

もともとこの正規表現を使った文字の取り出しは、PHP側からecho関数でJS側にデータを返す際に、
サーバ側が勝手に貼り付けてくる広告のタグを全て除去するためにやろうとしたことです。
このタグが【先頭文字】とかかれた部分に大量に(たぶん20要素以上)くっついています。

この部分がやっぱり影響してるんじゃないかと思いますが、
match(/<div class='readspace'> と指定してるのに、なぜその前の部分が影響してくるのかも良くわかりません。

その広告タグの部分が取得できればここに貼るつもりですが、現状としては対応はできているので、いつになるかわかりません(笑)(ちょっと他のことやりたくなってきたのでw)
まあ、気持ち悪いのでいつかは解決させるつもりですw

kimuchiさん、色々対応ありがとうございます^^次は気長にお待ち下さい^^
oui C'est la Vie♪

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【javascript】正規表現について

#11

投稿記事 by Ciel » 8年前

あ、書き忘れましたが、私は文字コードを全てUTF-8で処理しています。
その辺も関係あるのかもしれません。。。
oui C'est la Vie♪

アバター
kimuchi
記事: 163
登録日時: 8年前
住所: 東京

Re: 【javascript】正規表現について

#12

投稿記事 by kimuchi » 8年前

上の結果に誤りがありました。
3.4.の例では「.+」のときnullを返します。すみませんでした。

UTF-8に変えて実験してみましたがShift_JISの場合と変わりませんでした。
ですが、やはりサーバ上で行うと、
改行コードがない場合では「[\s\S]+」「[\s\S]*」ではマッチせず、「.+」じゃないとマッチしませんでした。
此方の結果は確認できませんでした。
(<div>間の文字なしでもやってみましたが「[\s\S]*」はマッチしてきました。)
当方もレンタルサーバーでの実験でしたが、広告はありません。
やはりサーバー環境の差異でしょうか?
kimuchiさん、色々対応ありがとうございます^^次は気長にお待ち下さい^^
これ以上は泥沼になりそうなので、一旦切り上げることにします。
何か分かればまたここに載せたいと思います。
長々とお付き合い頂きありがとうございました!

返信

“HTML/CSS/JavaScript” へ戻る