Add fuzzy matching support in room searches

src/components/structures/RoomSearch.tsx

@@ -49,7 +49,7 @@ interface IState {
 export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private dispatcherRef: string;
     private inputRef: React.RefObject<HTMLInputElement> = createRef();
-    private searchFilter: NameFilterCondition = new NameFilterCondition();
+    private searchFilter: NameFilterCondition = new NameFilterCondition({ fuzzy: true });
 
     constructor(props: IProps) {
         super(props);

src/stores/room-list/filters/NameFilterCondition.ts

@@ -19,16 +19,23 @@ import { FILTER_CHANGED, FilterKind, IFilterCondition } from "./IFilterCondition
 import { EventEmitter } from "events";
 import { normalize } from "matrix-js-sdk/src/utils";
 import { throttle } from "lodash";
+import { fuzzyMatch } from "../../../utils/strings";
+
+interface IOpts {
+    fuzzy?: boolean;
+}
 
 /**
  * A filter condition for the room list which reveals rooms of a particular
  * name, or associated name (like a room alias).
  */
 export class NameFilterCondition extends EventEmitter implements IFilterCondition {
     private _search = "";
+    private fuzzy = false;
 
-    constructor() {
+    constructor(options: IOpts = {}) {
         super();
+        this.fuzzy = options.fuzzy === true;
     }
 
     public get kind(): FilterKind {
@@ -66,6 +73,11 @@ export class NameFilterCondition extends EventEmitter implements IFilterConditio
     }
 
     public matches(normalizedName: string): boolean {
-        return normalizedName.includes(normalize(this.search));
+        const normalizedSearch = normalize(this.search);
+        if (this.fuzzy) {
+            return fuzzyMatch(normalizedName, normalizedSearch);
+        } else {
+            return normalizedName.includes(normalizedSearch);
+        }
     }
 }

src/utils/strings.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { memoize } from "lodash";
+
 /**
  * Copy plaintext to user's clipboard
  * It will overwrite user's selection range
@@ -84,3 +86,25 @@ const collator = new Intl.Collator();
 export function compare(a: string, b: string): number {
     return collator.compare(a, b);
 }
+
+/**
+ * A cache for regular expression used in fuzzy matching.
+ * With memoization to avoid performance pitfalls.
+ * @param str The string to inspect.
+ * @return {RegExp} a regular expression to inspect `str`.
+ */
+const fuzzyCache = memoize((str: string): RegExp => {
+    return new RegExp("^"+str.replace(/./g, function(x) {
+        // eslint-disable-next-line no-useless-escape
+        return /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/.test(x) ? "\\"+x+"?" : x+"?";
+    })+"$");
+});
+
+/**
+ * @param str The string to inspect.
+ * @param target The string to search for.
+ * @returns {bool} Whether the string has a fuzzy match.
+ */
+export const fuzzyMatch = (str: string, target: string): boolean => {
+    return fuzzyCache(str).test(target);
+};

test/utils/strings-test.ts

@@ -0,0 +1,53 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { fuzzyMatch } from "../../src/utils/strings";
+
+describe("strings", () => {
+    describe("fuzzyMatch()", () => {
+        it("should return exact matches", () => {
+            expect(fuzzyMatch("alice", "alice")).toBe(true);
+            expect(fuzzyMatch("", "")).toBe(true);
+        });
+        it("supports non ASCII characters", () => {
+            expect(fuzzyMatch("éè?]!", "é]")).toBe(true);
+            expect(fuzzyMatch("안녕하세요", "녕세")).toBe(true);
+        });
+        it("works with emojis", () => {
+            expect(fuzzyMatch("BoB 🥳", "🥳")).toBe(true);
+            expect(fuzzyMatch("1️⃣2️⃣3️⃣4️⃣5️⃣", "1️⃣3️⃣5️⃣")).toBe(true);
+        });
+        it("matches across multiple words", () => {
+            expect(fuzzyMatch("lorem ipsum dolor sit amet", "lidsa")).toBe(true);
+        });
+        it("doesn't match over multiple lines", () => {
+            expect(fuzzyMatch(`Hello
+            World`, "HW")).toBe(false);
+        })
+        it("should be case sensitive", () => {
+            expect(fuzzyMatch("BoB", "bOb")).toBe(false);
+        });
+        it("should match anywhere in the string", () => {
+            expect(fuzzyMatch("Alice", "Al")).toBe(true);
+            expect(fuzzyMatch("Alice", "lic")).toBe(true);
+            expect(fuzzyMatch("Alice", "ce")).toBe(true);
+        });
+        it("should allow for gaps in search", () => {
+            expect(fuzzyMatch("Alice", "Aie")).toBe(true);
+            expect(fuzzyMatch("Alice", "Ale")).toBe(true);
+            expect(fuzzyMatch("Alice", "lc")).toBe(true);
+        })
+    });
+});