正規表現でカンマ区切りで取得したいが、base,のカンマの場合は無視したい(js, split)

Question

バリデーションに引っ掛かり戻ってきた際に、写真の値を取得し、表示するという事を実装しています。
返ってくる値はbase64のコードになっています。
返り値から正規表現を使い写真一枚ずつの情報に分けて取得したいと考えています。

解決したい事：　 正規表現を使って、カンマ区切りで値を取得したいがbase,の場合のカンマは無視したいです

現状：　カンマで分けてしまっているので、base64,でも区切られてしまい求めている挙動になっていません。

let test = hoge.split(',')

let imgBase64 = test[0] + ',' + test[1]

本来取得したいものは、imgBase64の様な形で、0と1や2と3が連結したものです。

正規表現に対する知識が浅く前に進めずにいます。

https://murashun.jp/blog/20190215-01.html
http://www-creators.com/archives/1827

どなたかお分かりになる方居ましたら、教えて頂きたいです。
よろしくお願いいたします。

vue.js 2.6.11

Comments

[otn]

連結すれば良いだけでは？？

Answer 1

そこまで出来ているのであれば、単に連結すれば良いと思います。

let test = hoge.split(',');
let list = [];
for(let i=0; i<test.length; i+=2) list.push(test[i]+","+test[i+1]);

正規表現だけでやるなら、否定後読みというのを使います。

split(/(?<!data:image/(jpeg|png);base64),/)

Comments

[tenlife]

回答ありがとうございます！
for文で回せば良かったのですね。ご丁寧にサンプルありがとうございます。
気づきになりました。
正規表現で否定後読みは使えたら便利そうなのでチェックします！
ありがとうございました！

Answer 2

返ってくる値はbase64のコードになっています

data: で始まるデータは、DataURIスキーム という「バイナリデータをURLにも使えるように文字列化する」仕様です。

JavaScript では Canvas の toDataURL() メソッドで出力できるので、
「更に、data部分を抽出する」ためのユーザ関数を何度か回答させていただいたことがあります。

CPDEPEN parseDataURL()

カンマ区切りで値を取得したい

CSV などの文字列として取得したい表現ですので、どのようなフォーマットを望んでいるのかがよく分からないのですが、DataURIスキームから文字列に変換する場合、一度分解する必要があります。

Comments

[tenlife]

回答ありがとうございます！
とても勉強になります。なんとなく実装している部分が多々あるので少しづつ見ていけたらなと思います。
codepenもありがとうございます！