Filter data table based on a search term with variations

Question

In a React/Typescript project I'm working on I got a data table filled with product specs. Some examples of these specs are

• 'drawers (including manual input)'
• 'all-in-one'
• 'Wifi'
• 'Wifi Direct'
• 'Text recognition (OCR)'

Above the table I have a search field. When typing something in this field, the table updates to display only a matching data item. So lets say the search term is 'wi', both 'Wifi' and 'Wifi Direct' are displayed and all other data table items are hidden.

What I'm trying to accomplish is if the search term is a variant, 'wi fi' or 'wi-fi' for example, both data items also should be displayed. Am playing around with regular expressions, but not getting things to work as I want it to.

Got any tips or hints?

Most recent thing I tried was

// textbox 
<Textbox inputMode="text" placeHolder="" data={this} name="searchTerm" onKeyUp={this.handleSearchTerm} />

// method called
handleSearchTerm = (event: React.ChangeEvent<HTMLInputElement>): void => {
     // Trim and convert search term to lowercase
    const searchTerm = event.currentTarget.value.trim().toLowerCase();

    // Split search term into tokens
    const searchTermTokens = searchTerm.split(/\s+/).filter(token => token.trim()); 

    this.setState({ filterValue: searchTerm });

    // Filter specifications based on the search term
    const filteredSpecs = this.props.specs.filter((spec) => {
        // Concatenate field name and display value for searching
        const combinedValues = `${spec.fieldName} ${spec.displayValue || ''}`.toLowerCase();

        // Check if any search term token appears in the combined values
        return searchTermTokens.every(token => combinedValues.includes(token));
    });

    // Now, filteredSpecs contains only the specifications that match the search term
    console.log('Filtered specifications:', filteredSpecs);
};