Javascript-форум - Как правильно отсортировать свойства массива по вхождению (native js)?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как правильно отсортировать свойства массива по вхождению (native js)? (https://javascript.ru/forum/dom-window/76568-kak-pravilno-otsortirovat-svojjstva-massiva-po-vkhozhdeniyu-native-js.html)

Как правильно отсортировать свойства массива по вхождению (native js)?

Здравствуйте. Подскажите, пожалуйста, как правильно решить следующую задачу. У меня есть следующий массив.

let arr = [
    {
        id: 1,
        firstName: 'John',
        lastName: 'Smith'
    },
    {
        id: 2,
        firstName: 'Brady',
        lastName: 'Dennis'
    },
    {
        id: 3,
        firstName: 'Sandoval',
        lastName: 'Pratt'
    },
    {
        id: 4,
        firstName: 'Davis',
        lastName: 'Andrews'
    }
]

Мне необходимо при вводе в:

<input type="text">

например следующее значение:

Код:

John Denn

отсортировать массив следующим образом (без учета регистра):

let arr = [
    {
        id: 1,
        firstName: 'John',
        lastName: 'Smith'
    },
    {
        id: 2,
        firstName: 'Brady',
        lastName: 'Dennis'
    }
]

или например (без учета регистра)

Код:

Pratt Sm

let arr = [
    {
        id: 3,
        firstName: 'Sandoval',
        lastName: 'Pratt'
    },
    {
        id: 1,
        firstName: 'John',
        lastName: 'Smith'
    }
]

Буду благодарен любой помощи.

s24344,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
</head>

<body>
<ul class="list"></ul>
 <script>
function fn(arr, pattern) {
    pattern = new RegExp("^(" + pattern.trim().replace(/\s+/g, "|") + ")", "i");
    return arr.filter(function(el) {
        return Object.values(el).some(function(val) {
            return pattern.test(val)
        })
    })
};

let arr = [
    {
        id: 1,
        firstName: 'John',
        lastName: 'Smith'
    },
    {
        id: 2,
        firstName: 'Brady',
        lastName: 'Dennis'
    },
    {
        id: 3,
        firstName: 'Sandoval',
        lastName: 'Pratt'
    },
    {
        id: 4,
        firstName: 'Davis',
        lastName: 'Andrews'
    }
]
,
pattern = 'Pratt Sm',
arrFilter = fn(arr, pattern),
html = arrFilter.reduce(function(html, el) {
 return html +=  '<li class="item" ><div>'+el.firstName+' '+ el.lastName+'</div></li>'
},"");
document.querySelector(".list").innerHTML = html;
</script>

</body>
</html>

Спасибо за помощь.

Рони, вы могли бы ещё подсказать, как защититься, чтобы не ломался код, вот от таких вхождений:

// let pattern = '*';
let pattern = '\';

s24344,

function escapeRegExp(string){
    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

function fn(arr, pattern) {
        pattern = escapeRegExp(pattern);
        pattern = new RegExp("^(" + pattern.trim().replace(/\s+/g, "|") + ")", "i");
        return arr.filter(function(el) {
                return Object.values(el).some(function(val) {
                        return pattern.test(val)
                })
        })
};

s24344,
или формируйте RegExp сами и тогда

let pattern = /^(Pratt|Sm)/i;

function fn(arr, pattern) {
                return arr.filter(function(el) {
                return Object.values(el).some(function(val) {
                        return pattern.test(val)
                })
        })
};