IT系技術ブログ

【Chrome】DevToolsでHTML内の文字列を置換する方法

Chromeで表示しているWEBサイトのHTMLをF12キーを押下することで【DevTools】を呼び出すことができる。

ページ内のテキストをCtrl+Fで検索することはできるが、置換する方法が分からなかったのでその対応方法です。

環境

・Windows10

・Chrome

対処方法1

HTMLを全コピーし、テキストエディタで編集する方法

DevToolsを起動

1.ChromeでWEBサイトを表示する。

2.[F12]キーを押下する。

HTMLをコピー

1.DevToolsの[Elements]タブを選択する。

2.表示されたHTMLの一番上のHTMLタグを右クリックする。

3.[Edit as HTML]をクリックする。

4.編集状態になったら[Ctrl+A]で全選択。

5.全選択状態になったら[Ctrl+C]でコピーする。

テキストエディタで編集

1.置換機能のあるテキストエディタにコピーしたHTMLを貼り付ける。

2.置換したい文字列を置換する。

3.置換したHTMLをコピーする。

HTMLを上書き

1.DevToolsの[Elements]タブを選択する。

2.表示されたHTMLの一番上のHTMLタグを右クリックする。

3.[Edit as HTML]をクリックする。

4.編集状態になったら[Ctrl+A]で全選択。

5.全選択状態になったら[Ctrl+A]で貼り付け、コピーしているHTMLで上書きする。

6.上書き完了後、[Ctrl+Enter]で編集を完了する。

対処方法2

DevToolsでjavascriptを実行し上書きする方法

DevToolsを起動

1.ChromeでWEBサイトを表示する。

2.[F12]キーを押下する。

文字列置換のjavascriptを実行

1.DevToolsの[Console]タブを選択する。

2.以下のjavascriptコードをコピーし、貼り付ける。

3.貼り付け後、[Enter]キーで実行する。

※2回に分けてコピー、貼り付け、実行する。

document.head.innerHTML = document.head.innerHTML.replace(/置換したい文字列/g, "置換後の文字列")
document.body.innerHTML = document.body.innerHTML.replace(/置換したい文字列/g, "置換後の文字列")

対処方法3

Chromeの拡張機能を入れる方法

Search and Replaceをインスト―ル

Search and Replace

Search for text in input fields and replace it with different text.

https://chrome.google.com/webstore/detail/search-and-replace/bldchfkhmnkoimaciljpilanilmbnofo

HTMLの文字列を置換

1.「Search for」に置換前の文字列を入力する。

2.「Replace with」に置換先の文字列を入力する。

3.1個ずつ置換の場合、[Replace Next]ボタンを押下する。

4.全置換の場合、[Replace All]ボタンを押下する。

※置換に少し時間がかかるため、連打はしないこと

モバイルバージョンを終了