JSFiddle - React, Tailwind, and code Playground

JavaScript

var arr1 = [], arr2 = [], arr3 = [],
        mystring = "4|black|cat, 7|red|dog, 12|blue|fish";

    mystring.replace(/(\d+)\|([^\|]+)\|([^,]+)/g, function ($0, $1, $2, $3) { 
        arr1.push($1);
        arr2.push($2);
        arr3.push($3);
    });

alert(arr1);
alert(arr2);
alert(arr3);