<p><img class="w260" />あああああ</p>
<div class="ABC"><img class="w260" /></div>
<div class="ABC"><img class="w260" /><img class="w260" /></div>
<div class="ABC"><img class="w260" /><img class="w260" /><img class="w260" /></div>
というソースで<div class="ABC">内のimgのclassをw300に一発置換するにはどうしたらいいでしょうか。
A 回答 (7件)
- 最新から表示
- 回答順に表示
No.7
- 回答日時:
こういうことですか?
<p><img class="w300" />あああああ</p>
<div class="ABC"><img class="w300" /></div>
<div class="ABC"><img class="w300" /><img class="w300" /></div>
<div class="ABC"><img class="w300" /><img class="w300" /><img class="w300" /></div>
メモ帳でもなんでも、「すべて置換」をしたらいいのでは?
No.6
- 回答日時:
意味が違ったらごめんなさい。
jQueryを利用したら?
<head>
<!-- ↓jQueryのサイトからダウンロードなり読み込みなりする -->
<script src="xxxxx/jquery.js"></script>
<script>
$(function(){
$('.kaeru').click(function(){
$('.ABC').find('.w260').addClass('w300'); // class値'w260'に'w300'を追加
// このままでも良さそうです(後に追加した'w300'が優先されるので)が'w260'が邪魔なら以下の削除を追記
$('.ABC').find('.w260').removeClass('w260'); // class値から'w260'を削除
// 先に削除すると「.w260」が無くなっちゃうので、上の追加のスクリプトが動かないから、
// 'w300'を追加して'w260'を削除といった順番。
});
});
</script>
</head>
<body>
<p><img class="w260" />あああああ</p>
<div class="ABC"><img class="w260" /></div>
<div class="ABC"><img class="w260" /><img class="w260" /></div>
<div class="ABC"><img class="w260" /><img class="w260" /><img class="w260" /></div>
<button type="button" class="kaeru">変換</button>
</body>
ボタンの「変換」をクリックすると、
class="ABC"内のclass="w260"が"w300"に、一発で変わる(表示がw300で変わる)....はず。。。
検証してないので、ならなかったらごめんなさい。
No.4
- 回答日時:
>No.3 回答者: amanojaku6
パターンが完全に「<div class="ABC">」(固定)だと分かりきっているなら正規表現でも、メタ文字以外は通常の置換と同じになります(メタ文字は「¥(半角エンサイン)」でエスケープしてやるだけで良いのですが)、どちらにしろパターンが固定の場合は正規表現を使う必要性がありません。
下記(パターンが固定の場合)はメタ文字が無いので正規表現でも常の置換と同じになります。
検索する文字列
<div class="ABC">
置換後の文字列
<div class="w300">
No.3
- 回答日時:
EmEditor Free版を使用
EmEditor Free版
https://jp.emeditor.com/text-editor-features/his …
置換する前に必ずカーソルをテキストの先頭の行頭に移動させて下さい。
この場合は下記のように厳密に指定する必要もないかもしれません(下記は「< div class = "ABC" >」のような場合でも「<div class="w300">」に変換可能)。
検索する文字列
< *div +class *= *"ABC" *>
置換後の文字列
<div class="w300">
No.2
- 回答日時:
正規表現だけで行うと、大変難しい割には期待通りに処理できない可能性が高いです。
代案1: HTML ファイルのソースに対して、特定の行ならば単純置換する perl スクリプト
if (m|<div\s+class\s*=\s*"ABC">.+</div>|) { s|(<img\s+class\s*=\s*)\"w\d+\"|$1"w300"|g; }
代案2: ブラウザで表示した HTML にて、特定の要素ならクラス名を置換する jQuery を使った JavaScript
$('div.ABC img').attr('class','w300');
返信が遅れ申し訳ありません。
回答ありがとうございます。
vscodeだと上記例だけであればこんなので置換できましたが、
(?=.*div)<img.*?class="(.*?)" />
ほかの正規表現対応エディタやツールとかではヒットしないで、、、、
代案を参考にさせていただきます。
No.1
- 回答日時:
<script>
window.addEventListener('DOMContentLoaded', function(e){
[].forEach.call(document.querySelectorAll('.w260'),function(x){
x.classList.remove('w260');
x.classList.add('w300');
});
});
</script>
<div id="wrap">
<p><img class="w260" />あああああ</p>
<div class="ABC"><img class="w260" /></div>
<div class="ABC"><img class="w260" /><img class="w260" /></div>
<div class="ABC"><img class="w260" /><img class="w260" /><img class="w260" /></div>
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
htmlのid属性って必要なの?
-
CSSに同じclass名がいっぱい‥。...
-
外部css定義したclassをht...
-
CSSのクラス名・ID名の指定でワ...
-
idの中のid指定
-
CSSでテキストリンクの色を複数...
-
クリッカブルマップにツールチ...
-
正規表現の検索置換でdiv内のim...
-
一部のリンクの下線を消す
-
CSSで、IDとCLASSを...
-
htmlの文字が縦書きになる
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
Macで画像の切り抜きできないの?
-
<div id="container">の使いか...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
CSSのクラス名・ID名の指定でワ...
-
個別にリンクの色を変える方法
-
透過背景を解除するにはどうす...
-
liリストタグの背景色に色がつ...
-
子孫セレクタの読み方をおしえ...
-
CSSに同じclass名がいっぱい‥。...
-
最近、HTMLのヘッダーをIDで定...
-
外部css定義したclassをht...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
display:table-cell内でこんな...
-
htmlとcssで吹き出しの中に文字...
-
同ページ内でリンクの色を変え...
-
外部スタイルシートで定義した...
-
name属性とid属性
おすすめ情報