質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

6857閲覧

htmlの中から画像タグ(imgタグ)を削除したいです

LUCIA

総合スコア20

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/05/15 15:00

編集2018/05/18 07:24

Android端末を使用中で、Evernoteにてウェブクリップをしたのですが、本文中に絵文字がいくつか含まれていました。Evernote側で見るとその部分が大きな画像として認識されてしまうので、一度htmlに書き出して、まとめてimgタグを削除し、再度クリップしようと考えました。

プレーンテキストエディタに貼るとリンクとしての文字列もなくなってしまうので、できれば画像のみ無くした状態にしたいのですが…
Android端末のみを使って解決するとなると、やはり正規表現が鍵になるのでしょうか?
置き換え文字列の指定で困っているので、お力をお貸しいただけたら幸いです。

【試してみたこと】

html

1 2コード<img type="image/jpeg" src="/○○○.jpg" onclick="location.href='△△△.jpg';"/> 3 4上に上げたような形の、画像にリンクしているコードが何個かあるので、この部分が処理をすべきものだろうなということまでは把握しています。 5リンクの一部を消してみましたが、当然のごとく文字列として残ってしまいました…! 6 7【追記】 8 9```html 10<!DOCTYPE html> 11<html lang="ja"> 12 <head> 13 <meta charset="UTF-8"> 14 <title>HTMLテストコード</title> 15 </head> 16 <body> 17 <h1>HTMLの書き方</h1> 18 <p>はじめてのHTMLを作りましたよ✿</p> 19<img src="http://placehold.jp/150x50.jpg"> 20<img src="http://placehold.jp/400x200.png"> 21 22 23<script> 24var sample =document.getElementsByTagName("img"); 25 for(var i = 0; i < sample.length; ++i){ 26 sample.removeChild(sample[i]); 27}</script> 28 29 </body> 30</html> 31

こんなコードを書いて、一度はうまく行ったのですが、何故か二度目以降うまく行かなくなってしまいました(画像が消えない状態)
一度作業のためにscript部分をコメントアウトさせてしまったのですが、細かな空白など変えてしまったのでしょうか…

``html

<!DOCTYPE html> <html lang="ja">   <head>     <meta charset="UTF-8">     <title>HTMLテストコード</title>   </head>   <body>     <h1>HTMLの書き方</h1>     <p>はじめてのHTMLを作りましたよ✿</p> <img src="http://placehold.jp/150x50.jpg"> <img src="http://placehold.jp/400x200.png"> <script> window.addEventListener('load', function() { var sample =document.getElementsByTagName("img"); for(var i = 0; i < sample.length; ++i){ sample.removeChild(sample[i]);)} } } </script>

  </body>

</html>
更に追記 windowonloadイベントを加えてみましたがなかなかうまく行かないようです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

単純にimgタグ全消しということであれば、JavaScriptにてgetElementsByTagName()でimg指定してremove()すればいけそうですが、そういうことではなくて?

「特定のimgタグ」というのあればclassを振っておいてそのクラスだけ削除とかできなくもないですが。

あ、その前にAndroidかどうかの判定が必要ですかね。

投稿2018/05/16 00:29

編集2018/05/16 00:31
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

LUCIA

2018/05/16 03:56

回答ありがとうございます! Android単体でも、JavaScriptって動くのでしょうか…?ブックマークレットを走らせる雰囲気でとらえれば良いのでしょうか。 初歩的な質問ですみません…!
m.ts10806

2018/05/16 04:01

JavaScriptは基本htmlが動けば載せられるはずです。 ただEvernoteについては私のほうが分かっていないので検証できませんが・・・。 試しに下記のようにhtmlに入れてみてください。 「test」というアラートが表示されればOKです。 <script> alert("test"); </script>
LUCIA

2018/05/17 03:56

コメントありがとうございます! 教えていただいたコード、きちんと動作しました。ここの部分に、タグを削除するJavaScriptを書けばよいのですね? Evernoteについては、別途お問い合わせ中です。スマホからの更新だとHTMLのコードがプレーンテキストになってしまうようです…! やりたいことに少し近づいたので、もう少し頑張ってみます!
m.ts10806

2018/05/17 04:05

そうですね。あとは書いていけば良いだけです。 HTMLもそうですがJavaScriptも基本は利用するクライアント環境(要はブラウザ)がサポートしているかどうかなので、アクセスするユーザー側が意図的にOFFにしてなければ動くはずです。
LUCIA

2018/05/17 23:29 編集

使えそうなスクリプトを見つけました。 <script> var x = document.getElementsByTagName("p"); for(var i = 0; i < x.length; ++i){ x[i].innerHTML = "全ての中身を変更するよ!"; } </script> これは、Innerhtmlの場合ですが、このtagname部分をp→imgにかえて、最後の処理部分を、 for (var i = 0, len = x.length; i < len; i++) { x.removeChild(x[i]); とするということでしょうか… 消したい部分はみんな外部参照になっています、はじめにimgtypeとあるので、子要素としてすべての画像が引っかかってくれると推測するのですが…
m.ts10806

2018/05/17 23:59

外部参照・・・と言うのが良く分かりませんが、おそらくそれでいけそうに思います。
LUCIA

2018/05/18 05:35

うまく行きそうなコード(上記)を見つけて記入し、一度は画像が消えてくれたのですが、二度目以降何故か動きません。一度コメントアウト状態にしたことがありますが、そのときにスペースなど削除してしまったのでしょうか…
m.ts10806

2018/05/18 05:39

2度目 とは???
LUCIA

2018/05/18 06:13

ブラウザの読み込みの問題で画像のリロードが遅れ、消えたように見えただけのようでした。紛らわしくてすみません。やはり構文に誤りがあるようです…何か抜けているのでしょうか?
m.ts10806

2018/05/18 06:20

なるほど。構文に誤りがあるのではなく、htmlや画像のレンダリングと読み込みの関係です。 onload使いましょう。 window.onload = function() { var sample =document.getElementsByTagName("img"); for(var i = 0; i < sample.length; ++i){ sample.removeChild(sample[i]); } } ひとまずhtmlロード終了後に動くようにはなったはずです。 画像のエレメント自体のloadで自身をremoveするようにしてもいいかもしれませんが・・・。 https://www.sejuku.net/blog/19754#i どちらにしても「表示してから消す」感じになるので一瞬は見えちゃうんですけどね。
LUCIA

2018/05/18 07:28

教えていただいたwindow.onloadイベント及び、上記のように似た性質でロードが早い持つaddeventlistenerも使ってみましたが、やはりプレースホルダー画像が最初から表示されたままですね…なかなか強敵です。
m.ts10806

2018/05/18 13:44

試せてないんですが、タグ消去ではレンダリング止まらないんですかね? なんか、いっそのことサーバー側の言語でhtml出力前にandroid判定してhtmlタグ解析してimgタグだけ削除した方がいい気がしてきました。 画像のロード自体意味がないですしね。表示後の操作だと分が悪そうです。
m.ts10806

2018/05/18 13:46

それかいっそdisplay:noneに切り替えるか。画像ロードはするはずですが論理的に見えなくする。
LUCIA

2018/05/18 14:35

display:noneは盲点でした。確かにそちらのほうが簡単でいいですね。 あと、画像を消去するブックマークレットを見つけたのですが、こういうものは、いわゆる普通のJavaScript構文に戻すことって可能なのでしょうか…。動作がちゃんとしていたので、組み込めれば使えそうな予感がします。
LUCIA

2018/05/18 14:38

最終的な目標がウェブクリップなので、画像がきちんと消えた状態のhtmlが作れさえすれば、Evernoteに入れることができるのだと思います。 長いこと相談に乗ってくださり、嬉しい限りです。ありがとうございます。
m.ts10806

2018/05/18 14:44

display:none;はあくまで論理削除なのでどこまで対応してくれるかは分かりませんね。 とにかく色々やってみるしかないかもしれません。 「ロードしてたらダメ」というのでしたらwindow.loadのタイミングではなくimg.loadのタイミングをとってremoveというのはありでしょうけども。 > 画像を消去するブックマークレットを見つけたのですが、こういうものは、いわゆる普通のJavaScript構文に戻すことって可能なのでしょうか…。 ものによる、としか言えませんね・・
LUCIA

2018/05/18 15:20

ものによる…そうなのですね、試行錯誤しようかと思います。 絵文字一つ取るだけなのに、なかなか難しいですね…
LUCIA

2018/05/18 15:58

display:noneを使ってみたところ、無事、画像の消えたウェブクリップができました!ありがとうございます。 長い間お時間をいただき感謝します。 お世話になりました!
m.ts10806

2018/05/18 20:55

おお!よかったです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問