Matching/comparing two text strings and returning a result

Question

I got an input field were a user can type keywords for example "jeans". When "jeans" have been typed into the input field a list of search suggestions comes up which contains the word or part of the word "jeans".

I would like to match the string typed in the input field with the text that is shown in the search suggestions, and make the text from the search suggestions which matches the text typed in the input field bold. So far I can return a text string of what is typed in the input field, and I can also return a text string of what the search suggestions contains. Now I would need to compare thoes two, and my best guess is to use match().

However i keep getting null as a result in my function below. I need to use plain Vanilla JS for the solution.

    //get the text from the search suggestions list as a string
    var searchSuggestList = document.getElementsByClassName('search-suggest__list')[0];
    var searchSuggestListText = searchSuggestList.innerText;

    //get value from input field as a string
    var searchSuggestInput = document.getElementsByClassName('js-search-suggest-input')[0].value

    var result = searchSuggestInput.match(searchSuggestListText);

score 0 · Accepted Answer · answered Jan 17 '18 at 09:36

0

Since you're looking for the value of searchSuggestInput in searchSuggestListText, you need to invert your variables:

var result = searchSuggestListText.match(searchSuggestInput);

Keep in mind that searchSuggestInput will be treated as a regular expression. It's probably a good idea to read through the String.prototype.match() documentation before continuing with this approach, especially the section that describes how the method will return different results depending on the presence of the /g flag.

answered Jan 17 '18 at 09:36

Robby Cornelissen

91,784
22
134
156

Hmm... inverting the variables as you say still gives me a null :/ – Mikkel Fennefoss Jan 17 '18 at 09:49
`console.log("blue jeans\nwhite jeans\nwhatever".match("jeans"))` – Robby Cornelissen Jan 17 '18 at 09:50
Actually it works, but apparently it is case sensitive. so when I search for "JEANS" in uppercase it retuns me some result. – Mikkel Fennefoss Jan 17 '18 at 09:53
You can make it case-insensitive by providing an `/i` flag to the regular expression. Also, don't forget to [escape the input text](https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript) to be suitable for use in regular expressions. – Robby Cornelissen Jan 17 '18 at 09:56

Matching/comparing two text strings and returning a result

1 Answers1