JavaScriptでバックスラッシュをスラッシュに変換したいです。

バックスラッシュで区切られたパスをスラッシュで区切られたパスに変換したいです。

JavaScriptとHTMLで画像のローカルパスを取得してそのローカルパスをもとに画像を表示させたいのですが、
取得したパスはバックスラッシュでディレクトリーを区切ってあります。

html
1"C:\Users\name\Desktop\picture.png"

html の background = "画像のパス" で画像を表示する方法ならバックスラッシュのローカルパスでも表示可能なのですが
css の background-image や canvas で画像を表示する際はローカルファイルの場合 file:/// をパスに加えたうえ、
バックスラッシュをスラッシュにしたパスじゃないと表示されないようです。
そのためバックスラッシュのパスをスラッシュに変換したいです。

ほかのteratailの記事などで、.replace() を使って変換している例を見つけたのですが、
https://teratail.com/questions/119708
上の記事の場合

html
1var path = "fuga\hoge\pily.png"

などの二重のバックスラッシュで区切ってあるので

html
1var replaced = path.replace(/\/g, "/");

で変換できますが、変換したいパスは一重のバックスラッシュで区切ってあるので正しく変換できません。

html
1var replaced = path.replace(//g, "/");

このコードだとバックスラッシュが普通の文字列としてではなくエスケープシーケンス？というものとして扱われるらしくエラーになってしまいます。

どうすればバックスラッシュで区切られたパスをJavascriptでスラッシュに変換できるでしょうか？
またバックスラッシュのローカルパスでも html の background="画像のパス" では使用できるため <body> などの要素に
JavaScriptからbackground="画像のパス"を追加したりできないでしょうか？

パスを取得するコード
以下のサイトのコードです。
http://javascript.pc-users.net/browser/form/file.html

取得したパスがバックスラッシュのローカルパスのため
net::ERR_FILE_NOT_FOUND　になってしまいます。

html
1<html>
2    <head>
3    <title>JavaScript file</title>
4    <script type="text/javascript">
5    function dispFile(){
6        var filePath  = document.fm.upFile.value;
7        console.log(filePath)
8        alert('選択したファイルのパスは' + filePath + 'です' );
9        let body = document.getElementById("bodyId")
10        body.setAttribute("style","background-image:url('file:///"+filePath+"')")
11        
12    }
13    </script>
14    </head>
15    <body id = "bodyId">
16    <form name="fm">
17    選択したファイルのパスを表示<br>
18    <input type="file" name="upFile" value="upFile"><br>
19    <input type="button" value="確認" onclick="dispFile()">
20    </form>
21    </body>
22    </html>

回答よろしくお願いします！

int32_t

2021/10/06 05:03

> で変換できますが、変換したいパスは一重のバックスラッシュで区切ってあるので正しく変換できません。試してみました? それでできそうですよ。

itagagaki

2021/10/06 05:10

>> var path = "fuga\\hoge\\pily.png" これは二重バックスラッシュではありません。 \\ で１文字のバックスラッシュを表しています。 > var replaced = path.replace(/\\/g, "/"); これも同様です。

9nahito

2021/10/06 05:12

一重のスラッシュで区切った ```html "C:\Users\name\Desktop\picture.png" ``` を変換するとのパスを ```html var replaced = path.replace(/\\/g, "/"); ``` で変換するとスラッシュがすべて消えて C:Users ameDesktoppicture.png になってしまいます。また、 ```html var replaced = path.replace(/\/g, "/"); ``` で変換すると Uncaught SyntaxError: missing ) after argument listとなり ```html var replaced = path.replace(/\/g, "/"); ``` のコードのバックスラッシュがエスケープシーケンスとして認識されるためエラーになってしまいます。

Lhankor_Mhy

2021/10/06 05:19

var replaced = path.replace(/\\/g, "/"); で、動作しています。ただし、 > 疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するため、文字列には C:\fakepath\ の接頭辞が付きます https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file#value

9nahito

2021/10/06 05:22

GET file:///C:/fakepath/error1k.png net::ERR_FILE_NOT_FOUND 皆さん返信ありがとうございます。 var replaced = path.replace(/\\/g, "/"); は動作したのですが、Lhankor_Mhyさんのいうようにfakepathが追加されたためエラーになったのですか？

int32_t

2021/10/06 05:27

> fakepathが追加されたためエラーになったのですか？そうでしょうね。<input type=file>のファイルからローカルのパスを正確に知ることは不可能です。そのファイルをHTML/CSS内で画像として扱う方法は、調べれば見つけられると思います。

行動規範の内容に同意します

回答4件

ベストアンサー

やりたいことは、こういうことだと思います。

js
1    function dispFile() {
2      let body = document.getElementById("bodyId")
3      body.setAttribute("style", "background-image:url('" + URL.createObjectURL(new FormData(document.getElementsByName('fm')[0]).get('upFile')) + "')")
4    }

投稿2021/10/06 05:35

Lhankor_Mhy

総合スコア37634

9nahito

2021/10/06 06:15

回答ありがとうございます！無事完璧に動作しました！！途中あきらめかけてたんですが、本当に助かりました！！ほとんどそのまんまになりますがコード全体は下のようになりました。 <html> <head> <title>JavaScript file</title> <script type="text/javascript"> function displayFile() { let body = document.getElementById("bodyId")//body要素をid="bodyId"から取得する body.setAttribute("style", "background-image:url('" + URL.createObjectURL(new FormData(document.getElementsByName('formName')[0]).get('upFileName')) + "')") } </script> </head> <body id = "bodyId"> <form name="formName"> 選択した画像を表示<br> <input type="file" name="upFileName" value="画像を選択"><br> <input type="button" value="画像の表示" onclick="displayFile()"> </form> </body> </html>

Lhankor_Mhy

2021/10/06 06:32

お役に立てたようで何よりです。エスケープについては、リテラルで書く時にしか影響しない、と理解されるとわかりやすいと思います。 JavaScript の内部の実体としては、エスケープ文字もなにもないです。

行動規範の内容に同意します

下記ページを上から下まで熟読してください。

テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ | MDN

投稿2021/10/06 05:19

itagagaki

総合スコア8407

9nahito

2021/10/06 06:18

回答ありがとうございます！letとか最近までしらなかったです。letは便利ですよね。

行動規範の内容に同意します

一重のスラッシュで区切った

"C:\Users\name\Desktop\picture.png"とソースコードに書いた時点で、それはC:Users（改行）ameDesktoppicture.pngという意味になってしまいます。

最初から1重のバックスラッシュ区切りで書くことが間違っているので、どうしようもありません。

投稿2021/10/06 05:19

編集2021/10/06 05:24

maisumakun

総合スコア146851

itagagaki

2021/10/06 05:21

揚げ足取りで申し訳ありませんが、文中のスラッシュはバックスラッシュですね。

maisumakun

2021/10/06 05:27

> 揚げ足取りで申し訳ありませんが、文中のスラッシュはバックスラッシュですね。質問文の方に引っ張られてしまいました。 > 取得したパスがバックスラッシュのローカルパスのため net::ERR_FILE_NOT_FOUND　になってしまいます。こちらも、「ファイル名から取得する」方法が間違っています（ブラウザ内から、アップロードされたファイルのパスは基本的に取れません）。objectURLを起こすなどの方法で対応してください。

9nahito

2021/10/06 06:26

回答ありがとうございます！maisumakunさんのobjectURLを起こすなどの方法は Lhankor_MhyさんがいっていたURL.createObjectURL()を使う方法だったんですね！

行動規範の内容に同意します

"C:\Users\name\Desktop\picture.png"

スラッシュはエスケープ用の文字なので上記では文字列が成立しません

javascript
1var str='C:\Users\name\Desktop\picture.png';
2console.log(str.replace(/\/g,'/'));

投稿2021/10/06 05:12

yambejp

総合スコア118164

itagagaki

2021/10/06 05:16

バックスラッシュは、ですね。あと、文字列が成立しないのではなくて、\U はただのUになるだけですね。

9nahito

2021/10/06 06:30 編集

回答ありがとうございます！今回でyamabejpさんがいうように\などのエスケープシーケンスが文字列にまざっているとエラーになることがわかりました。ずっと改行の\nの\が何か知らずに使ってました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問