根据作为正则表达式的属性对对象数组进行排序

Question

If I have an array of words...

const a = ["abc", "abcd", "xyz"]

and I want to sort that array and filter it based off a pattern (ex. "ab") then I can use filter and regex like so... [giving me the array of items which has "ab" at the start of every item in the array"

let value = "abc";
let regex = new RegExp(`^${value}`, `i`);
const sorted = a.sort().filter(v => regex.test(v));

However, what about this same principle, but instead of an array of items, those items are objects within an array, like so...

const b = [
{text: "abc", color: "blue"},
{text: "abcd", color: "red"},
{text: "xyz", color: "yellow"}
]

Answer 1

You should first filter() the array based on the regex (there is no need to sort elements that will be filtered later) and then sort it using String::localeCompare()

 const arr = [ {text: "abcd", color: "red"}, {text: "abc", color: "blue"}, {text: "xyz", color: "yellow"} ]; let value = "abc"; let regex = new RegExp(`^${value}`, `i`); const sortedArr = arr .filter(x => regex.test(x.text)) .sort((a, b) => a.text.localeCompare(b.text)); console.log(sortedArr);

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

Answer 2

you'll need to tell .sort() which property you want to sort with and pass v.text to the regex :

 const b = [{ text: "abc", color: "blue" }, { text: "abcd", color: "red" }, { text: "xyz", color: "yellow" } ] let value = "abc"; let regex = new RegExp(`^${value}`, `i`); const sorted = b.sort((a, b) => { if (a.text > b.text) return 1; if (a.text < b.text) return -1; return 0 }).filter(v => regex.test(v.text)); console.log(sorted);

Answer 3

You can create a function which accepts input array, string, and a function which accepts the current value of .findIndex() to sort the resulting array and the string value which is passed to RegExp constructor, where the function parameters can be adjusted to use destructuring assignment to match specific property name within input array of objects, with .splice() used to remove matched element from array, or remainder of input array.

 const regexSort = (arr, value, fn) => { const res = []; for (let i; (i = arr.findIndex(v => fn(v, value))) > -1; res.push(arr.splice(i, 1)[0])); return [...res, ...arr]; } const a = ["abc", "abcd", "xyz", "abcdef", "qrst", "abcg"]; const b = [ {text: "abc", color: "blue"}, {text: "abcd", color: "red"}, {text: "xyz", color: "yellow"}, {text: "abcdef", color: "gold"}, {text: "qrst", color: "green"}, {text: "abcg", color: "brown"} ]; let value = "abc"; // array of strings console.log( regexSort(a, value, (key, value) => new RegExp(`^${value}`, `i`).test(key)) ); // array of objects, destructure `text` property assign to `key` console.log( regexSort(b, value, ({text: key}, value) => new RegExp(`^${value}`, `i`).test(key)) );

Answer 4

(Filtering first may avoid sorting a lot of value that would be discard by filter)

 const b = [ {text: "abcf", color: "white"}, {text: "abc", color: "blue"}, {text: "xyz", color: "yellow"}, {text: "abcd", color: "red"}, {text: "abcz", color: "green"}, ]; let value = "abc"; let regex = new RegExp(`^${value}`, `i`); const sorted = b .filter(item => regex.test(item.text)) .sort((a, b) => a.text.localeCompare(b.text)); console.log(sorted);