javascript の正規表現で、先頭から特定の単語までを置き換えする方法を探しています。


例えば、

------------------
なんたらかんたら<br>
すたこらさっさ<br>
------------------


というときに

”先頭から<br>”より前の文字を変更したいのです。
(この場合特定の単語とは”<br>”のこと)

------------------
変更後<br>
変更後<br>
------------------

hoge = hoge.replace('ここが知りたい', '変更後');

変更は最初にマッチする特定の単語、1回きりでOKです。

説明が悪いかも知れませんが、よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2010/11/22 06:48:22
  • 終了:2010/11/22 13:54:36

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4521ベストアンサー獲得回数18792010/11/22 07:34:32

ポイント100pt

質問を読み直してて気が付いたんだけど、正規表現じゃなくて、replace メソッドの使い方を間違ってるからできないんじゃない?

第一引数は文字列じゃないよ。

var s = "なんたらかんたら<br>"
ss = s.replace(/.*\<br\>/, "変更後<br>")

それとも、特定の単語を置き換えるときに引っ張ってくる方法が分からない?

var s = "なんたらかんたら<br>"
ss = s.replace(/.*(\<br\>)/, "変更後$1")

さっきの書き方だと、特定の単語が複数はいってると、最後の一つだけを取り出してしまうので、特定の単語を必ず残したいなら、

var s = "なんたらかんたら<br>すたこらさっさ<br>"
ss = s.replace(/.*?(\<br\>)/, "変更後$1")

これでは、最初のひとつしか置き換えられないので、全部置き換えるには、

var s = "なんたらかんたら<br>すたこらさっさ<br>"
ss = s.replace(/.*?(\<br\>)/g, "変更後$1")
id:tontonpokopoko

回答をありがとうございます。質問が悪くてすいません。


を変更したいのではなく、

”なんたらこうたら” を変更したいのです。

”なんたらこうたら”は、未確定(ユーザが書き込む等)で、

先頭から
 の、間の不確定な文字を変更したいのです。

上記の場合だと
が変更されますよね?

2010/11/22 08:31:24

その他の回答(4件)

id:a-kuma3 No.1

a-kuma3回答回数4521ベストアンサー獲得回数18792010/11/22 07:00:02

これで良い?

.*\<br\>
id:a-kuma3 No.2

a-kuma3回答回数4521ベストアンサー獲得回数18792010/11/22 07:34:32ここでベストアンサー

ポイント100pt

質問を読み直してて気が付いたんだけど、正規表現じゃなくて、replace メソッドの使い方を間違ってるからできないんじゃない?

第一引数は文字列じゃないよ。

var s = "なんたらかんたら<br>"
ss = s.replace(/.*\<br\>/, "変更後<br>")

それとも、特定の単語を置き換えるときに引っ張ってくる方法が分からない?

var s = "なんたらかんたら<br>"
ss = s.replace(/.*(\<br\>)/, "変更後$1")

さっきの書き方だと、特定の単語が複数はいってると、最後の一つだけを取り出してしまうので、特定の単語を必ず残したいなら、

var s = "なんたらかんたら<br>すたこらさっさ<br>"
ss = s.replace(/.*?(\<br\>)/, "変更後$1")

これでは、最初のひとつしか置き換えられないので、全部置き換えるには、

var s = "なんたらかんたら<br>すたこらさっさ<br>"
ss = s.replace(/.*?(\<br\>)/g, "変更後$1")
id:tontonpokopoko

回答をありがとうございます。質問が悪くてすいません。


を変更したいのではなく、

”なんたらこうたら” を変更したいのです。

”なんたらこうたら”は、未確定(ユーザが書き込む等)で、

先頭から
 の、間の不確定な文字を変更したいのです。

上記の場合だと
が変更されますよね?

2010/11/22 08:31:24
id:rikuba No.3

rikuba回答回数26ベストアンサー獲得回数122010/11/22 09:29:52

ポイント100pt

前方先読み((?=))を使うのはどうでしょう。

"なんたらかんたら<br>\nすたこらさっさ<br>".replace(/.+?(?=<br>)/, "変更後");
id:tontonpokopoko

今試していますが、マッチしないようで何も起こりません。

もう少しいろいろと試してみます。

2010/11/22 10:04:22
id:rikuba No.4

rikuba回答回数26ベストアンサー獲得回数122010/11/22 10:14:02

すみません。先ほどの回答でグローバルマッチのgフラグを忘れていました。

/.+?(?=<br>)/g

今試していますが、マッチしないようで何も起こりません。

ひと通りのブラウザで試してみたのですが、問題ありませんでした。よろしければ環境をお教えください。

id:tontonpokopoko

質問が悪くて申し訳ありませんでした。

わざわざテスト用のページを作ってくださり本当に感謝です!

2010/11/22 13:49:14
id:Galapagos No.5

Galapagos回答回数963ベストアンサー獲得回数892010/11/22 10:47:48

ポイント100pt

こんな感じでいかがでしょう。

「変換」ボタンをクリックしてみてください。

<html>
<head>
<script tyle="text/javascript">
function hoge() {
    var pat = /^([^<]*)/;    //置換パターン
    var rep = "変換後";      //置換後文字列
    var s1 = document.getElementById("hogetxt").value;
    var s2 = s1.replace(pat, rep);
    document.getElementById("hogetxt").value = s2;
}
</script>
</head>
<body>
<form>
<textarea id="hogetxt" cols="40" rows="3">
なんたらかんたら<br>
すたこらさっさ<br>
</textarea>
<br />
<input type="button" onClick="hoge()" value="変換" />
</form>
</body>
</html>
id:tontonpokopoko

コードを書いてくださり、助かりました。

今後も参考にさせていただきます。またよろしくお願いします。

2010/11/22 13:50:53
  • id:tontonpokopoko
    返信はタグ<br> という文字が消えてしまった!

    回答をありがとうございます。質問が悪くてすいません。


    <br>を変更したいのではなく、

    ”なんたらこうたら” を変更したいのです。

    ”なんたらこうたら”は、未確定(ユーザが書き込む等)で、

    先頭から
    <br>の、間の不確定な文字を変更したいのです。

    上記の場合だと
    <br>が変更されますよね?

  • id:a-kuma3
    いやいや、"なんたらこうたら" を変更するつもりで書いてますよ。
    <br> の手前までをマッチさせるためには、<br> も書いてあげないと駄目です。
    そのうえで、<br> を含めた範囲を、<br> をつけて置き換えるんです。

    で、<br> が何になるか分からん、ということであれば、マッチさせる表現で () を使えば、
    置き換えの文字列で、$1 を使うと、() でマッチした部分をそのまま使えるんです。
  • id:tontonpokopoko
    コメントをありがとうございます。

    試すと、

    ”なんたらこうたら”は残ったまま、

    ”なんたらこうたら変更後<br>”

    となってしまうのですが・・
  • id:a-kuma3
    ぼくも試してから書いたんだけどな。
    駄目なコードをそのままコメントに貼り付けてもらえれば、何か答えられるかも。
  • id:tontonpokopoko
    var exam = document.getElementById("test").innerHTML;

    ID部分、"test" の箇所はクリックされるたびにウェブ上で<HR>で分断され表示↓。

    なんたら1<HR>なんたら2<HR>なんたら3<HR>なんたら4<HR>・・

    (やりたいことは最後の「なんたら1」を別のクリックで変更すること)

    (別クリック部分)
    function hoge(){
    var chan = exam.replace(/.*?(\<HR\>)/, "変更後$1");
    }

    変更後<HR>なんたら2<HR>なんたら3<HR>なんたら4<HR>・・

    「var chan」を、ID部分、"test" に埋め込む。
    document.getElementById("test").innerHTML = chan;


    もう少し試しますが・・
  • id:a-kuma3
    試してみました。innerHTML で、<HR> が小文字なんだわ。
    正規表現で、大文字/小文字の違いを無視するフラグ "i" を指定するとうまくいくよ。

    <html>
    <script>
    function xxx() {
    var exam = document.getElementById("test").innerHTML;
    var chan = exam.replace(/.*?(\<HR\>)/i, "変更後$1");
    document.getElementById("test").innerHTML = chan;
    }
    </script>
    <body>
    <div id="test">
    なんたら1<HR>なんたら2<HR>なんたら3<HR>なんたら4<HR>
    </div>

    <button onclick="xxx()">push</button>

    </body>
    </html>
  • id:tontonpokopoko
    皆さま、ありがとうございます。
    実際のスクリプトはもう少し複雑なのでいろいろとテスト中です。
  • id:a-kuma3
    もしたから Internet Explorer なんだね。
    > ”なんたらこうたら”は残ったまま、
    の意味が分かったよ。
    なんだこいつ >IE というか、JScript
  • id:tontonpokopoko
    IEです。
    やはりいただいたコードでも残っています。

  • id:a-kuma3
    わかったお >tontonpokopoko くん

    innerHTML の <HR> の前に、改行が入ってるんだわ。
    正規表現の . は、改行以外の任意の文字にマッチするので、. だけじゃ駄目。
    後、複数行にマッチするフラグも指定しなきゃ駄目。

    var chan = exam.replace(/(.|\n)*?(<HR>)/im, "変更後$2");

    これなら、IE でも大丈夫。
    良い勉強になったわ。
  • id:rikuba
    innerHTMLではなく、標準のDOMのメソッドを使うのはどうでしょうか。

    [http://rikuba.com/q1290376101.html:title=テスト用のページ]

    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>q1290376101</title>
    <body>
    <div id="test">
    なんたら1<HR>なんたら2<HR>なんたら3<HR>なんたら4<HR>
    </div>
    <p><input type="button" onclick="change()" value="change"></p>
    <script>
    function change() {
    document.getElementById('test').firstChild.data = '変更後';
    }
    </script>
  • id:tontonpokopoko
    皆さま、ありがとうございます!
    すべて確認させていただき、望むように動作しました。
    まだ試したいことがあるので、とりあえずお礼まで。
  • id:tontonpokopoko

    以下で動作をすでに確認しましたが、念のために・・

    replace の第二引数に変数を利用する場合。

    (.|\n)*?(<HR>)/im, hoge + "$2")

    でOKでしょうか?

    お願いします。

  • id:a-kuma3
    > replace の第二引数に変数を利用する場合。

    OK、OK。
    関数にわたる前に引数が評価されるのだから、式にしようが、別の関数の戻り値にしようが、それが文字列になっていれば大丈夫。
  • id:tontonpokopoko
    皆さん、親身になっていただきありがとうございます。
    おかげで早期に解決できました。

    また質問することがあると思いますが、
    どうぞよろしくお願いいたします。

  • id:tontonpokopoko
    a-kuma3 さん。
    このコメに気づいていただければいいのですが・・

    Firefox で確認したところ、上記の方法だと、

    なんたら1<HR>なんたら2<HR>なんたら3<HR>なんたら4<HR>

    が、

    変更後<HR>なんたら2<HR>なんたら3<HR>なんたら4<HR>

    にならずに、「変更後」から後ろがすべて消えてしまうようです。

    つまり

    変更後(<HR>なんたら2<HR>なんたら3<HR>なんたら4<HR>)

    ()内の部分がすべて消えるという意味。

    何か原因がわかれば教えていただきたいのですが・・

  • id:a-kuma3
    Firefox 3.5 だけど、きちんと動くけどなあ。

    function xxx() {
    var exam = document.getElementById("test").innerHTML;
    var rep = "変更後"
    var chan = exam.replace(/(.|\n)*?(<HR>)/im, rep + "$2");
    document.getElementById("test").innerHTML = chan;
    }
  • id:tontonpokopoko
    お騒がせしました。解決しました。

    違う箇所に原因があり、
    HR と hr 、大文字と小文字 にまた悩まされていました。

    IE 困ったものです・・

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません