• 締切済み

Repl-Aceで、特定のclassのDIVのみPに置換する方法

現在個人サイトを運営していて、最近になってHTMLの修正用にRepl-Aceを使いはじめました。 それで、初めて知った「正規表現」を使って、<div>の中でもclassが"subtitle"の物のみを<p>に変えようと思ったのですが、<div class="subtitle">と</div>の間の文章はそのままに「<div」と「</div>」のみ「<p」と「</p>」に変換する方法が思いつきません。 具体的に言うと、 <div class="headline">あいうえお</div> <div class="subtitle">かきくけこさしす</div> <div lang="ja" class="subtitle">さしすせそたちつてと</div> を、 <div class="headline">あいうえお</div> <p class="subtitle">かきくけこさしす</p> <p lang="ja" class="subtitle">さしすせそたちつてと</p> に、一度に変換したいのです。 <div class="subtitle">~</div>は複数のファイルに存在するので、出来れば一度に変換したいのですが…

みんなの回答

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

うん。確かに正規表現でできるよ。 でもサイトの約束でコードをそのまま載せてあげられない。 しょうがないから資料を・・・ http://www.google.co.jp/search?hl=ja&lr=lang_ja&q=%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%20%E5%88%9D%E5%BF%83%E8%80%85

sptz-gth
質問者

お礼

回答ありがとうございます。 やはりもう少し粘って調べるべきでしたよね… 「正規表現 特定の部位 置換」で検索したら見事にヒットしました(^^;) 検索文字列:<div(.*)class="subtitle"(.*)</div> 置換文字列:<p$1class="subtitle"$2</p> これで本当に良いのかは分かりませんが上手くいきました。

関連するQ&A

  • divやp要素の前後は改行されるとありますがどこから改行されるのでしょうか

    <body> <div align="center"> <br> あいうえお<br> <img src="../xxx/1.jpg" width="640" height="400" border="0"> <br> <p class="text_min"> あいうえお<br> </p> あいうえお<br> <br> </div> </body> 上記の場合、改行位置はこうでしょうか?↓ *改行* <div align="center"> </div> *改行* *改行* <p class="text_min"> </p> *改行* という事でしょうか? 当たり前のような質問ですいません!

  • 正規表現で複数行に渡る範囲を取り出す

    <html> <div></div> <div class="content"> <b>内容<b/><br /> <img src="#" /> <p>ほげほげほげほげ</p> </div> <div></div> </html> 上のようなHTMLがあるとします。<div>の前後にもhtmlは書かれています。 そこから正規表現で<div class="content">~~~</div>の中身を取り出したいのですが、できません。 言語はPHPで、 /<div class=\"content\">.*<\/div>/ と書いてみたんですが、改行などがありうまくいきませんでした。 どのようにに記述すればうまくいくんでしょうか。

    • ベストアンサー
    • PHP
  • javascriptにて特定の文字置換

    いつもサイトを拝見させていただき勉強させてもらっておりますsasaloと申します。 javascriptにて1点調べていたのですがどうしてもうまくいかなくお分かりになる方がおられましたら ご教授いただけないでしょうか? どうぞよろしくお願いします。 早速ですが、件名に書かせていただきました、javascriptにて特定の文字置換を行いたく思いましてどこが悪いのか私の知識不足でうまく動作しません。 ▼HTMLソース <div class="aaa"> <p id="sell_txt">abcショップで販売</p> </div> <div class="aaa"> <p id="sell_txt">売約済</p> </div> <div class="aaa"> <p id="sell_txt">abcショップで販売</p> </div> こちらのソースのabcショップで販売という文字を売約済と変更したいです。 また<p id="sell_txt">abcショップで販売</p>はページの中でいくつ出てくるのかはページによってことなり多いページでは50以上ということもあります。 ▼javascript window.onload=function(){ if(document.getElementById('sell_txt').innerHTML = 'abcショップで販売'){ document.getElementById('sell_txt').innerHTML = '売約済'; } } こちらのjavascriptを記述して適用しているのですが、初めに出現してくる<p id="sell_txt">abcショップで販売</p>のみの1つが売約済にかわり、残りは<p id="sell_txt">売約済</p>として表示されてしまいます。 お手数で済みませんがどなたかお分かりになられる方がいましたらソースコードを教えていただけないでしょうか? またお時間がありましたら簡単でもちろん結構ですのでソースコードのご説明をいただけたら幸いです。 どうぞよろしくお願いいたします。 from sasalo

  • CSSによる簡易な複数言語対応について

    現在日本語で公開されているHPを英語でも公開するにあたり、 HTMLとCSSのみで2言語対応したいと思っています。 対応するというのは、 ・同じHTMLファイル上で英語と日本語を併記 ・ユーザーのブラウザが日本語なら日本語表示(英語は表示しない) ・日本語以外なら英語表示 とします。 なお、FireFoxでは以下のやり方でできましたが、 IEはlang属性が未対応とのことで、うまくいきません。 htmlファイル <html> <head> <link rel="stylesheet" href="global.css" type="text/css"> <link rel="stylesheet" href="local.css" type="text/css"> </head> <body> <div class="ja" lang="ja"> <p>日本語のテキスト</p> </div> <div class="en" lang="en"> <p>English text</p> </div> </body> </html> global.css *[lang='en'] { display: block; } *[lang='ja'] { display: none; } local.css.ja *[lang='ja'] { display: block; } *[lang='en'] { display: none; } また、divタグでの判定であれば htmlを以下のようにして <div class="ja" ・・・ cssファイルの *[lang='ja'] を div.ja などに 置き換えることで、 IEも含めうまくいくのはわかっているのですが すでに日本語で作成済みのため、これからclass名を 日本語と英語で別にしていくのはさけたいと思っています。 シンプルに対応できないものでしょうか。 JAVAスクリプトは使用しないようにしたいと考えています。 また、まったく違う簡単な方法があれば教えていただけないでしょうか よろしくお願いします。 (注:上記コードはコンテント・ネゴシエーション可能なサーバー上でのみ稼働とのこと。)

    • ベストアンサー
    • HTML
  • 2つのブロック要素をまとめてインライン表示したい。

    2つのブロック要素をまとめてインライン表示したい。 この質問タイトルが適切かは全く自信がないのですが、例として次のようなHTMLがあるとします。 <body> <div class="container"> <div class="title"> <h1>「タイトル」</h1> </div> <div class="subtitle"> <p>「サブタイトル」</p> </div> </div> </body> 「タイトル」のすぐ横に「サブタイトル」が表示されるようにしたいと思っています。 /* 表示イメージ */ 「タイトル」 「サブタイトル」 ただし、表示幅に対してタイトルが長いと、タイトルが複数行に渡って表示されます。 この場合もタイトルの表示が終わった直後に「サブタイトル」を表示したいです。 /* 表示イメージ */ 「非常に長~~~~~~~~~い タイトル」 「サブタイトル」 これを実現するにはCSSでどのように記述したらよいのでしょうか?

    • ベストアンサー
    • HTML
  • floatによる複数段の段組でIE6で意図通り表示できない

    過去の質問に似たような話題ありそうなんですが、 どれがこの事象なのか発見できませんでしたので、 申し訳ありませんが、新規質問させて頂きます。 HTMLとCSSで以下のように書いています。 (再現に必要な部分のみを取り出してあります) ---------------------------------------- <html> <head> <style> .div1 { width:100px; float:left; } .div2 { width:100px; clear:both; float:left; } </style> </head> <body> <div class="div2">あいうえお</div> <div class="div1">かきくけこ</div> <div class="div1">さしすせそ</div> <div class="div2">たちつてと</div> <div class="div1">なにぬねの</div> <div class="div1">はひふへほ</div> </body> </html> ---------------------------------------- 意図は、以下のように、3列×2段の段組で表示することです。 あいうえお かきくけこ さしすせと たちつてと なにぬねの はひふへほ 実際 FireFox (2.0.0.6) ではこの通り表示されるのですが、 IE6では あいうえお かきくけこ さしすせと なにぬねの はひふへほ たちつてと という表示になってしまいます。 IEのバグなのか私の書き方がまずいのかよくわかりませんが、 IEでも意図通り表示させるためにはどのように直したらよいでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部HTMLの特定のクラス名の文のみとりだしたい

    あるサイトのHPでは <div> <p class="en">AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> <p class="ja">ああああああああああああああああああ</p> </div> <div> <p class="en">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p> <p class="ja">いいいいいいいいいいいいいいいいいいいい</p> </div> となっています。当然、クラス名がenのもjaのも表示されていますが、 class="en"の文章(AAAAAAAAAAAAAABBBBBBBBBBBBBB)だけ取り出したいのですが、 いい智恵はないでしょうか? http://highfivecreate.com/blog/course/tips/817.html に挑戦していますが、これ自体、動きません。 jquery.xdomainajax.jsの一行目の<がおかしいとchrome君が言っています。

  • IE5.5 element.attributes

    IE5.5 で、要素の属性のリストを取得する方法を教えて下さい。 element.attributes を試してみましたが、全然違うものが返ってきて、どうしようかと悩んでいます。 <div id="sample" style="color:red;" class="" lang="ja"></div> こういう要素があったら、例えば、 { id:'sample', style:'color:red;', class:'', lang:'ja' } というような一覧を作れるようなリストが欲しいということです。

  • SEOでは

    GoogleやYahooに対するSEOではキーワードを多く書いたり、ページランクを上げるという以前にきれいなHTMLコードを書くのが鉄則ですが、HTMLを書く際、各要素ごとにスペースを入れるべくなのでしょうか? たとえば <div class="j"> <p>hogehoge</p> </div> がよいのか、それともスペースを入れた <div class="j">   <p>   hogehoge   </p> </div> のほうがよいのでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • DreamweaverCS6で空白を認識させない

    初心者です。 Windows7でDreamweaverCS6を利用してホームページを制作しています。 ソースコードのレイアウトが見にくいのでタグの先頭を揃えたいのですが、<p></p>内で半角・全角ともスペースキーで作った空白が反映されてしまい、タグとしては見やすく後々管理しやすそうにはなるのですが、ブラウザ上の表示がとても変になり困っています。 例)スペース空白(■)でこのような表示になります。 表示させたい形→あいうえお ブラウザ表示 →あ い う え    お タ グ 入力 →あ ■ い ■ う ■ え ■ ■ ■ ■ お このようなブラウザ表示にしたい ブラウザ表示→あいうえお タ グ 入力→あ ■ い ■ う ■ え ■ ■ ■ ■ お __________________________________________ ↓ 見にくいタグ記述例(現在 空白が反映されるため使えない) ↓ ↓ ↓ <div class="nihongo">   <p>かきくけこさしすせそたちつてとかきくけこさしすせそたちつてと<br>なにぬねのはひふへほ<br>まみむめも<br>あいうえお<br>かきくけこさしすせそたちつてとかきくけこさしすせそたちつてと</p> </div>  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ __________________________________________ ↓ 見やすいタグ記述例(これがしたい) ↓ ↓ ↓ <div class="nihongo">   <p>かきくけこさしすせそたちつてとかきくけこさしすせそたちつてと<br>     なにぬねのはひふへほ(***任意の場所で改行&空白で先頭をそろえる***)     まみむめも<br>かきくけこさしすせそたちつてとかきくけこさしすせ<br>       そたちつてと(***<br>と空白で先頭をそろえる***)     <br>あいうえおかきくけこさしすせそたちつてとかきくけこさしすせそた       ちつてと</p> </div>  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ 色々ググッてみたものの、よくわかっていないためか答えに辿りつけません。 スペースキーでタグの先頭を揃えても、そのスペース(空白)がブラウザ上で反映されない入力、または設定、記述方法などご存知であればご教示くださいませ。 どうぞよろしくお願いいたします。 m(_ _)m

    • ベストアンサー
    • CSS

専門家に質問してみよう