Question

如何有效地过滤与字符序列匹配的字符串数组，以便字符可以在字符串中的任何位置匹配，但按照它们的使用顺序匹配？

这是编辑器和IDE中常见的快速过滤文件名的功能。

请参阅附加图像链接中的过滤器图示。

Illustration of Filter in action

这不是JavaScript autocomplete without external library的重复，因为这里的要求之一是用户输入“Caz”来匹配“沧州”，这在这个问题的答案中有解释，但不在其他答案中的问题。

Answer 1

我认为这应该非常接近。答案尝试构建一个正则表达式，使字符按照它们在搜索词中出现的顺序进行匹配。

＆＃13;

y = [value for (index, value) in enumerate(L) if index == value]

＆＃13;

Answer 2

这实际上比看起来简单。另外，当前接受的解决方案实际上并不能始终如一地工作。

您只需要构造一个正则表达式，即可在搜索字符串的每个字符之间接受0个或多个字符。

const values = ['Belgium', 'Brest', 'Britian']
const query = 'Be'

// /.*b.*e.*/
const re = RegExp(`.*${query.toLowerCase().split('').join('.*')}.*`)

// [ 'Belgium', 'Brest' ]
const matches = values.filter(v => v.toLowerCase().match(re))

Answer 3

这是一个例子。

要减少意外错误，您应该将输入值限制为您想要输入的值。

var all = ['test','string','array','example'];

function getMatch(arr, str){
  var reg = new RegExp(str.split('').join('.*'), 'i');
  
  return arr.filter(function(item) {
    if (item.match(reg)) {
      return item;
    }
  });
}

function search(value){
  document.getElementById("result").innerHTML = getMatch(all, value);
}

<input type="text" onkeyup="search(this.value)">
<br />
<span id="result"></span>

Answer 4

这个简单的例子使用正则表达式和Array.prototype.filter()

＆＃13;

var gucciArray = ["Cairo", "Casablanca", "Cangzhou", "Carcas"]; // Your array of things to filter

function disp(filteredArray) {
 
    // Display the filtered results on the page
    var results = document.getElementById("gucci-gang");
    results.innerHTML = filteredArray.join("<br>");

}

function regExpTest(inputString, filter) {
    
    // Checks to see if what the user typed matches any items in gucciArray
    return filter.test(inputString);

}

function typeKey(event) { // This function is supposed to be called whenever the user types a letter in the text box
      
    var textTyped = event.target.value; // What the user typed in the text box;

    var filter = new RegExp(textTyped.split('').join('.*'), "gmi"); // Matches anything with the characters that the user typed, in order, with any characters inbetween them
  
    // Filter the array
    // Returns a new array containing the items from the old array that pass the RegExp test
    var newArray = gucciArray.filter(function(bruh) {return regExpTest(bruh, filter);});

    // Display the filtered results on the page
    disp(newArray);

}

disp(gucciArray);

＆＃13;

<html>
    <head>
    </head>
    <body>

        Type here: <input type="text" onkeyup="typeKey(event);">
        <br>
        List of matches:
        <div id="gucci-gang"></div>

    </body>
</html>

＆＃13;

disp是可选的。它仅适用于交互式代码段。如果您想要获取以后使用的值，请将typeKey中的最后一行替换为return newArray;

过滤匹配一系列字符的JavaScript数组

4 个答案: