- ベストアンサー
JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続に置換する方法
- JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続に置換する方法について教えてください。
- 現在は正規表現を利用して置換していますが、よりシンプルで効率的な方法があれば教えてください。
- また、最終的に処理する文字列が多い場合でも、置換後の文字列を小さく保持する方法があれば教えてください。
- mibusys
- お礼率99% (156/157)
- JavaScript
- 回答数9
- ありがとう数9
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (8)
- fujillin
- ベストアンサー率61% (1594/2576)
No3です。 ＞1回目の置換でつけたspanタグ内の空白も置換してしまった為、 ＞希望の動きにはなりませんでした。 ありゃ、うっかりしてました。 そうですね。 すでに、No4様が回答なさってますが、それを応用させて頂いて… （できそうな気がしてたんだけど、引数で受ける方法が分からなかった＜お勉強させて頂きました） var str = "hoge_hogehove___asd#bn__"; str=str.replace(/(_+)/g, function(s){return '<span class="…">'+s.replace(/_/g,'#')+'</span>';}); alert(str); で、いけるみたい。（IE6でもOKでした）
お礼
ANo.6さんの内容と同じですね。 回答タイミングの差かもしれませんが。 今回はいろいろ勉強になりました。 ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
連続済みません。 No.7は#が1つしかないので、No.6のようにしないとダメですね。 別の方法で。 str=str.replace(/(_+)/g, function(s){return '<span class="">'+Seq(s,s.length)+'</span>';}); var Seq=function(s, n){var r='';while(n){r+=s;n--};return r;}; var Seqをreplace中の無名関数に入れても動くはずですが、遅くなります。
お礼
試してみましたが、そのままではダメでした。 しかし新たな提案を試みていただき ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
#に変換を忘れていました。 str=str.replace(/(_+)/g, function(s){return '<span class="">#</span>';});
お礼
試してみましたが、そのままではダメでした。 しかし新たな提案を試みていただき ありがとうございました。
- infeeld
- ベストアンサー率37% (3/8)
一旦スペースをキーボード入力できない文字に変換するのはどうでしょう。 var str = "hoge hogehove asd#bn "; //スペースを「\0」に置換 str = str.replace(/ /g, "\0"); //後方参照にて「\0+」にspanタグのプレフィックスとサフィックスを追加 str = str.replace(/(\0+)/g, "<span class='…'>$1</span>"); //「\0」を「#」に変換 str = str.replace(/\0/g, "#"); alert(str); 一行で書いても構いません。
お礼
私の最初のコードで得られる結果よりはるかにいい方法ですね。 ただ、3回の置換は少し冗長に感じます。 ただ、「\0」でいったん退避するという方法はユニークであり 参考になりました。ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
str=str.replace(/(_+)/g, function(s){return '<span class="">'+s+'</span>';}); これでどうでしょうか。 _ を半角スペースに変換して下さい。（1カ所） Ajax未対応ブラウザ、IE5.5、IE6で動かないかもしれません。
お礼
第二引数に関数を指定できるんですね。 知りませんでした。 この方法を知ったことで、私の対応能力がだいぶ高まったと思います。 大変勉強になりました。ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
もっとうまい方法があるかも知れませんが… var str = "hoge_hogehove___asd#bn__"; str = str.replace(/(_+)/g, "<span class='…'>$1</span>").replace(/_/g, "#"); alert(str);
お礼
うわ。これですね。 普通に2段階で置換すればいいだけだったんですね…。 意味合い的にも最も適しているように感じます。 難しく考えすぎていたのかもしれません。 大変参考になりました。ありがとうございました。 ※てか、皆さんのご回答が早くてびっくりしています。 今回は本当に、質問してよかったです。
補足
いけたと思ったのですが、「_」はあくまでも空白であるため1回目の置換でつけたspanタグ内の空白も置換してしまった為、希望の動きにはなりませんでした。 仕方がないので最後に「.replace(/span#class/g, "span class");」を入れ、3発置換にしました。 しかしこれだと最初の文字列の段階で「span#class」という文字列があった場合には意図せぬ置換を行なうことになってしまいます。が、実際にはまずないであろうと思われる文字列なので、とりあえずはいいことにしました。 質問前は「無理かも」と思っていたのですが意外といろいろな案が出てくるので、もしかしたらさらなる良案が出てくるかもしれないので、もう少し様子を見させていただきます。
- chie65536（@chie65535）
- ベストアンサー率44% (8717/19797)
追記。 冗長部分を取り去る際に無関係な他のタグまで置換しちゃうと困るので、以下のようにしましょう。 １．一旦、未定義タグを追加する 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, "<span class='…'>"); str.replace(/<xxst>/g, "</span>"); hoge<xxst>#<xxed>hogehove<xxst>###<xxed>asd#bn<xxst>##<xxed> ↓ hoge<span class="…">#</span>hogehove<span class="…">###</span>asd#bn<span class="…">##</span> 正規表現の指定時に「/」記号を使用するので「途中結果では『/』を含まない文字列を使って、最後の最後で『/』を含む文字列に置換している」と言う事に注意すること（そうしないと正規表現の置換元の文字列の指定がメンド臭い事になる）
お礼
追加で別の方法も考えていただきありがとうございました。 今回はいろいろ勉強になりました。
- chie65536（@chie65535）
- ベストアンサー率44% (8717/19797)
＞(2)：現状：hoge<span class="…">#</span>hogehove<span class="…">#</span><span class="…">#</span><span class="…">#</span>asd#bn<span class="…">#</span><span class="…">#</span> 文字列「hoge<span class="…">#</span>hogehove<span class="…">#</span><span class="…">#</span><span class="…">#</span>asd#bn<span class="…">#</span><span class="…">#</span>」の「</span><span class="…">#」を正規表現の置換を使って「#」に置換したらどうなりますか？ 冗長になるのが判っているなら、冗長にしたあとで、冗長部分を削除すれば良いでしょう。 そりゃ「一発で冗長部分を作らずに最適な置換をする」と気持ち良いですが「結果が最適化されてりゃ、途中はどうでもいい」と思いませんか？
お礼
おお。逆転の発想といいますか、私には無かった発想です。 正規表現での置換を1行追加しただけで実現できました。 「一発」ではありませんが、私が質問で掲げた「シンプルにパシッ」 には十分該当する解決策だと思います。 私が抱えている課題は一旦解決しました。 しかしそれ以上に、行き詰まったときには 少し違った角度からアプローチしたり、考え方を変えてみたりすると 出口が見える(場合もある)という好例を学ばせていただきました。 大変参考になりました。ありがとうございました。
お礼
試したところ期待通りに動きました。 すごいです。こんな書き方が出来るのですね。 私が心の奥で求めていた方法と一致します。 今回は本当に質問してよかったです。 比較的短時間に、複数の方にいろいろな方法を 教えていただけ大変勉強になりました。 ありがとうございました。
補足
「\x3C」とありましたが、「\x3C」でも「<」でも大丈夫でした。 環境を書き忘れていましたが、WinXP IE8 HTAとして実行です。 環境によって「\x3C」でなければならない場合もあるのですかね？ とりあえず、私の環境では大丈夫でしたが、汎用的な環境を想定し ご回答をいただいたのかと思います。 本当に参考になりました。ありがとうございました。