正規表現の検索置換でdiv内のimgのclassを変換したい

締切済

質問者：ジリー
質問日時：2018/10/14 23:02
回答数：7件

<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に一発置換するにはどうしたらいいでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

最新から表示
回答順に表示

No.1

回答者： yambejp
回答日時：2018/10/15 09:33

<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>

- 0
- 件

通報する

この回答へのお礼

返信が遅れ申し訳ありません。
回答ありがとうございます。
参考にさせていただきます。

通報する

お礼日時：2018/10/17 08:06

No.2

回答者： Ogre7077
回答日時：2018/10/15 12:04

正規表現だけで行うと、大変難しい割には期待通りに処理できない可能性が高いです。

代案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');

- 0
- 件

通報する

この回答へのお礼

返信が遅れ申し訳ありません。
回答ありがとうございます。
vscodeだと上記例だけであればこんなので置換できましたが、
(?=.*div)<img.*?class="(.*?)" />
ほかの正規表現対応エディタやツールとかではヒットしないで、、、、
代案を参考にさせていただきます。

通報する

お礼日時：2018/10/17 08:19

No.3

回答者： amanojaku6
回答日時：2018/10/21 21:09

EmEditor Free版を使用

EmEditor Free版
https://jp.emeditor.com/text-editor-features/his …

置換する前に必ずカーソルをテキストの先頭の行頭に移動させて下さい。
この場合は下記のように厳密に指定する必要もないかもしれません(下記は「< div class = "ABC" >」のような場合でも「<div class="w300">」に変換可能)。

検索する文字列
< *div +class *= *"ABC" *>

置換後の文字列
<div class="w300">

- 0
- 件

通報する

No.4

回答者： amanojaku6
回答日時：2018/10/21 21:47

>No.3　回答者： amanojaku6

パターンが完全に「<div class="ABC">」(固定)だと分かりきっているなら正規表現でも、メタ文字以外は通常の置換と同じになります(メタ文字は「￥(半角エンサイン)」でエスケープしてやるだけで良いのですが)、どちらにしろパターンが固定の場合は正規表現を使う必要性がありません。
下記(パターンが固定の場合)はメタ文字が無いので正規表現でも常の置換と同じになります。

検索する文字列
<div class="ABC">

置換後の文字列
<div class="w300">

- 0
- 件

通報する

No.5

回答者：くさったぱん
回答日時：2018/10/28 20:38

どういういみ

- 0
- 件

通報する

No.6

回答者： MinervaAlice
回答日時：2018/11/04 12:27

意味が違ったらごめんなさい。

jQueryを利用したら？

<head>

<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で変わる)....はず。。。

検証してないので、ならなかったらごめんなさい。

- 0
- 件

通報する

No.7

回答者：ぐーるぐる
回答日時：2018/11/10 00:52

こういうことですか？

<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>

メモ帳でもなんでも、「すべて置換」をしたらいいのでは？