JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続

Question

JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続に置換する方法

※可視化のため下記のサンプルでは、空白を「_」で表現しています
「_」の連続を、「#」の連続とそれをタグで囲んだ状態にしたいと思っています。

やりたいことはこんな感じです。
(0)：置換前：hoge_hogehove___asd#bn__
(1)：置換後：hoge#hogehove###asd#bn##

しかし正規表現の書き方が分からなかった為、現状のコードはこんな感じにしています。
str.replace(/_/g, "#");

実行結果はこうなります。
(2)：現状：hoge#hogehove###asd#bn##

無駄に長いのですがとりあえず現状でも、htmlとして表示したときの結果は間違っていません。
しかし
・正規表現を十分に理解できていないレベルの低いコードっぽい
・最終的には比較的多くの文字列を処理をする
・保持しておいて繰り返し表示するので置換後の文字列を小さくしておきたい
と思っています。

(0)を(1)の状態に変換する方法を教えてください。
出来れば正規表現でシンプルにパシッと決める方法を希望しています。
よろしくお願いします。

Chaire · Accepted Answer

// JavaScript 1.3, Jscript 5.5, ECMA 262-3
'hoge_hogehove___asd#bn__'.replace(/_+/g, function(s) { return '\x3Cspan class="hoge">' + s.replace(/_/g, '#') + '\x3C/span>'; });

fujillin · Answer

No3です。＞1回目の置換でつけたspanタグ内の空白も置換してしまった為、＞希望の動きにはなりませんでした。ありゃ、うっかりしてました。　そうですね。すでに、No4様が回答なさってますが、それを応用させて頂いて… （できそうな気がしてたんだけど、引数で受ける方法が分からなかった＜お勉強させて頂きました） var str = "hoge_hogehove___asd#bn__"; str=str.replace(/(_+)/g, function(s){return ''+s.replace(/_/g,'#')+'';}); alert(str); で、いけるみたい。（IE6でもOKでした）

taloo · Answer

連続済みません。

No.7は#が1つしかないので、No.6のようにしないとダメですね。

別の方法で。

str=str.replace(/(_+)/g, function(s){return ''+Seq(s,s.length)+'';});

var Seq=function(s, n){var r='';while(n){r+=s;n--};return r;};

var Seqをreplace中の無名関数に入れても動くはずですが、遅くなります。

taloo · Answer

#に変換を忘れていました。 str=str.replace(/(_+)/g, function(s){return '#';});

infeeld · Answer

一旦スペースをキーボード入力できない文字に変換するのはどうでしょう。

var str = "hoge hogehove asd#bn ";

//スペースを「\0」に置換
str = str.replace(/ /g, "\0");
//後方参照にて「\0+」にspanタグのプレフィックスとサフィックスを追加
str = str.replace(/(\0+)/g, "$1");
//「\0」を「#」に変換
str = str.replace(/\0/g, "#");

alert(str);

一行で書いても構いません。

taloo · Answer

str=str.replace(/(_+)/g, function(s){return ''+s+'';});

これでどうでしょうか。

_ を半角スペースに変換して下さい。（1カ所）

Ajax未対応ブラウザ、IE5.5、IE6で動かないかもしれません。

fujillin · Answer

もっとうまい方法があるかも知れませんが… var str = "hoge_hogehove___asd#bn__"; str = str.replace(/(_+)/g, "$1").replace(/_/g, "#"); alert(str);

chie65535 · Answer

追記。

冗長部分を取り去る際に無関係な他のタグまで置換しちゃうと困るので、以下のようにしましょう。
　
１．一旦、未定義タグを追加する
str.replace(/_/g, "<xxst>#<xxed>");
　
hoge_hogehove___asd#bn__
↓
hoge<xxst>#<xxed>hogehove<xxst>#<xxed><xxst>#<xxed><xxst>#<xxed>asd#bn<xxst>#<xxed><xxst>#<xxed>
　
２．冗長部分を削除する
str.replace(/<xxed><xxst>#/g, "#");
　
hoge<xxst>#<xxed>hogehove<xxst>#<xxed><xxst>#<xxed><xxst>#<xxed>asd#bn<xxst>#<xxed><xxst>#<xxed>
↓
hoge<xxst>#<xxed>hogehove<xxst>###<xxed>asd#bn<xxst>##<xxed>
　
３．未定義タグを本来のタグに置き換える
str.replace(/<xxst>/g, "");
str.replace(/<xxst>/g, "");
　
hoge<xxst>#<xxed>hogehove<xxst>###<xxed>asd#bn<xxst>##<xxed>
↓
hoge#hogehove###asd#bn##
　
正規表現の指定時に「/」記号を使用するので「途中結果では『/』を含まない文字列を使って、最後の最後で『/』を含む文字列に置換している」と言う事に注意すること（そうしないと正規表現の置換元の文字列の指定がメンド臭い事になる）

chie65535 · Answer

＞(2)：現状：hoge#hogehove###asd#bn## 　文字列「hoge#hogehove###asd#bn##」の「#」を正規表現の置換を使って「#」に置換したらどうなりますか？　冗長になるのが判っているなら、冗長にしたあとで、冗長部分を削除すれば良いでしょう。　そりゃ「一発で冗長部分を作らずに最適な置換をする」と気持ち良いですが「結果が最適化されてりゃ、途中はどうでもいい」と思いませんか？

JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続

// JavaScript 1.3, Jscript 5.5, ECMA 262-3

この回答への補足

No3です。

連続済みません。

#に変換を忘れていました。

一旦スペースをキーボード入力できない文字に変換するのはどうでしょう。

str=str.replace(/(_+)/g, function(s){return '<span class="">'+s+'</span>';});

もっとうまい方法があるかも知れませんが…

この回答への補足

追記。

＞(2)：現状：hoge<span class="…">#</span>hogehove<span class="…">#</span><span class="…">#</span><span class="…">#</span>asd#bn<span class="…">#</span><span class="…">#</span>

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング