Q&A
href="/hoge/xxx/sample.css"
を
href="../../sample.css"
に書き換えるのですか？
staticフォルダはどこにいったのでしょうか？
わざわざ相対パス指定せずに
href="/sample.css"
ではいけないのでしょうか？
やりたいこと
HTMLファイルに記載された特定の文字列をjavascriptのreplace関数で置換する。
詳細
以下のような構成でhtml、css、jsファイルがあるとします。
tree
1src 2├── server 3│ ├── A 4│ │ ├── a1.html 5│ │ ├── a2.html 6│ │ └── a3.html 7│ ├── B 8│ │ ├── a1.html 9│ │ └── a2.html 10│ └── C 11│ └── a3.html 12└── static 13 ├── sample.css 14 ├── sample.js 15 ├── sample2.css 16 ├── sample2.js 17 ├── sample3.css 18 └── sample3.js
各HTML(a1.html、a2.html、a3.html)からstaticフォルダのcss、javascriptファイルを読みこんでいますが、パスが間違っているとします。（パスが”/hoge/xxx/”ではなく、”../../static/”が正しいパス）
a1.html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta name="viewport" content="width=device-width" /> 5 <meta charset="utf-8" /> 6 <title>App</title> 7 8 // ”/hoge/xxx/”ではなく、”../../static/”が正しいパス 9 <link rel="preload" href="/hoge/xxx/sample.css" as="style" /> 10 <link rel="preload" href="/hoge/xxx/sample2.css" as="style" /> 11 <link rel="preload" href="/hoge/xxx/sample3.css" as="style" /> 12 <script src="/hoge/xxx/static/sample.js"></script> 13 <script src="/hoge/xxx/static/sample2.js"></script> 14 <script src="/hoge/xxx/static/sample3.js"></script> 15 16</head> 17<body> 18 <div> 19 <div class="Home_container"> 20 <main class="Home_main"> 21 <h1 class="Home_title"> 22 Welcome 23 </h1> 24 <p class="Home_description"> 25 Get started by editing 26 </p> 27 </main> 28 </div> 29 </div> 30</body> 31</html>
a2.html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta name="viewport" content="width=device-width" /> 6 <meta charset="utf-8" /> 7 <title>App2</title> 8 9// ”/hoge/xxx/”ではなく、”../../static/”が正しいパス 10 <link rel="preload" href="/hoge/xxx/sample.css" as="style" /> 11 <link rel="preload" href="/hoge/xxx/sample2.css" as="style" /> 12 <script src="/hoge/xxx/static/sample.js"></script> 13 <script src="/hoge/xxx/static/sample2.js"></script> 14 15 16</head> 17<body> 18 <div> 19 <div class="Home_container"> 20 <main class="Home_main"> 21 <h1 class="Home_title"> 22 Welcome2 23 </h1> 24 <p class="Home_description"> 25 Get started by editing2 26 </p> 27 </main> 28 </div> 29 </div> 30</body> 31</html>
a3.html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta name="viewport" content="width=device-width" /> 6 <meta charset="utf-8" /> 7 <title>App3</title> 8 9// ”/hoge/xxx/”ではなく、”../../static/”が正しいパス 10 <link rel="preload" href="/hoge/xxx/sample3.css" as="style" /> 11 <script src="/hoge/xxx/static/sample3.js"></script> 12 13</head> 14 15<body> 16 <div> 17 <div class="Home_container"> 18 <main class="Home_main"> 19 <h1 class="Home_title"> 20 Welcome3 21 </h1> 22 <p class="Home_description"> 23 Get started by editing3 24 </p> 25 </main> 26 </div> 27 </div> 28</body> 29 30</html>
この場合、src/server配下の全てのhtmlファイルで読み込まれている、
”/hoge/xxx/”、という文字列を、”../../static/”という文字列に置換したいのですが、
方法が思いつかないため質問させて頂きました。
方法がわかる方がいらっしゃいましたら教えて頂けると助かります。
どんな環境で置換作業をしたいですか?
Windowsと Linux/macOS でかなり違うと思います。
パスの表記が間違っていました。ご指摘ありがとうございます。
階層が異なるので相対パスでの指定にしないといけないと思っていますが、
ファイル名のみの指定で読みこめるものなのでしょうか？
今回は手動での置換ではなく、javascriptでの置換を検討しています。
環境としては、macOSになります。
> javascriptでの置換を検討しています。
Node.js などのコマンドライン JavaScript でやりたいという意味ですか?
それともブラウザ上で閲覧時に置換したい?
Node.js などのコマンドライン JavaScript になります。
具体的にはNext.jsを使用しており、next.jsのビルド時にパスが間違ったHTMLが出力されるため、
そのパスを修正したいと思っています。
> Node.js などのコマンドライン JavaScript になります。
> 具体的にはNext.jsを使用しており、next.jsのビルド時にパスが間違ったHTMLが出力されるため、
それは重要情報なので質問文に書くべきです。
ビルドで期待されるURLが生成されない問題を本来解決すべきじゃないでしょうか。
node.jsでやる前提であればタグ付けしたほうがよいでしょう
回答ありがとうございます。
Node.jsのタグを追記しました。
ビルドで期待されるURLが生成されない問題はNext,js内での静的ファイル生成時の
問題があり、今回の問題とは分けたいと考えております。
やりたいことは、node.js環境でビルド時にjavascriptファイルを起動させ、置換関数を実行したい、という点になります。
> node.js環境でビルド時にjavascriptファイルを起動させ、置換関数を実行したい
ではその問題に集中するとして、何がわかりませんか?
不完全でもいいので、書いてみたコードを開示してください。
回答1件
0
htmlを修正するならエディタでgrepしながら変換保存すればいいのでは？
投稿2022/04/14 04:01
総合スコア114843
回答ありがとうございます。エディタでgrepすればできますが、今回は手動ではなくプログラムでの置換を検討しています。
node.jsでhtmlファイルを読んで編集して上書き保存するのでしょうか？
それとも、node.jsで適宜htmlファイルを読み込んで編集して表示したいのでしょうか？
node.jsでhtmlファイルを読んで編集して上書き保存するイメージを考えています。
OSにもよりますがhtmlを上書きするならそれこそsedやawkなどの方が楽では？
webアプリでもないところでnode.jsにこだわる意味がわからないのですが
あなたの回答
tips
プレビュー
