I have these base64 string for different file formats:

const a1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...";
const a1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...";
const a2 = "data:audio/webm;codecs=opus;base64,GkXfo59ChoEBQveBAULygQ...";
const a3 = "data:audio/mpeg;base64,//uQRAAAAAAAAAAAAAAAAAAAAA...";
const a4 = "data:audio/wav;base64,UklGRixtHwBXQVZFZm10IBAAAAA...";

How can I get the file type not format like:

image, audio etc.

CodePudding user response：

A basic regular expression can do the trick.

Update: Here is the expression for accessing the root media type: /^data:([^/] )\//

const images = [
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...",
  "data:audio/webm;codecs=opus;base64,GkXfo59ChoEBQveBAULygQ...",
  "data:audio/mpeg;base64,//uQRAAAAAAAAAAAAAAAAAAAAA...",
  "data:audio/wav;base64,UklGRixtHwBXQVZFZm10IBAAAAA..."
];

const getMediaType = (image) => image.match(/^data:(. ),/)?.[1];
const getRootMediaType = (image) => getMediaType(image).split('/')?.[0];

console.log(images.map(getMediaType));
console.log(images.map(getRootMediaType).join(', '));

.as-console-wrapper { top: 0; max-height: 100% !important; }

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here it is again, but just for the root type:

const images = [
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...",
  "data:audio/webm;codecs=opus;base64,GkXfo59ChoEBQveBAULygQ...",
  "data:audio/mpeg;base64,//uQRAAAAAAAAAAAAAAAAAAAAA...",
  "data:audio/wav;base64,UklGRixtHwBXQVZFZm10IBAAAAA..."
];

const getRootMediaType = (image) => image.match(/^data:([^/] )\//)?.[1];

console.log(images.map(getRootMediaType).join(', '));

.as-console-wrapper { top: 0; max-height: 100% !important; }

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

To get the file type, you can use:

const a1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...";

function getFileType(str){
  return str.match(/:(. )\//gm)[0].slice(1, -1)
}

console.log(getFileType(a1))

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

To get the file extension, you can use:

const a1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...";

function getFileType(str){
  return str.match(/\/(. );/gm)[0].slice(1, -1)
}

console.log(getFileType(a1))

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

E.g. with a regular expression: /^data:([^\/] )\//

const strings = [
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbI...",
  "data:audio/webm;codecs=opus;base64,GkXfo59ChoEBQveBAULygQ...",
  "data:audio/mpeg;base64,//uQRAAAAAAAAAAAAAAAAAAAAA...",
  "data:audio/wav;base64,UklGRixtHwBXQVZFZm10IBAAAAA..."
];
const getType = str => str.match(/^data:([^\/] )\//)[1];
console.log(strings.map(getType));

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Looks behind for 'data:' and looks ahead for '/', and returns the alphanumeric between them.

const data = [
  "data:image/png;base64",
  "data:image/png;base64",
  "data:audio/webm;codecs=opus;base64",
  "data:audio/mpeg;base64",
  "data:audio/wav;base64"
]

const types = data.map(str => {
  let x = str.match(/(?<=data:)\w*(?=\/)/)[0]
  return x;
})

console.log(types)

<iframe name="sif6" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>