Click here to Skip to main content
15,850,299 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I'm having an input field from where I'm taking the value inserted and I'm transforming this value into a RegExp to use later in code.

The problem is that in current form, the RegExp is not working for partial words.

What I have tried:

let x = document.querySelector('#searchedWord').value;

How can I construct this RegExp in order to accept partial words?
var r = new RegExp('(' + term + ')', "ig");
Updated 29-Jun-21 22:57pm
jsc42 29-Jun-21 12:40pm    
What do you mean by 'partial word'? Do you, for example, mean that if a user enter a search word of 'leapfrog', you would match 'leap' or 'frog'; or do you mean that the search word just has to appear in the text being searched?
User 15221028 29-Jun-21 12:52pm    
The searched word has to appear in the text being searched.

For example, if I'm searching for word "cool" I would like to show the results even if the word is not complete. Even if I have word "coo" or "co" I would like to find them too.
Richard Deeming 30-Jun-21 3:34am    
You need to be more specific.

Do you want to match anything that contains any character in the searched word? (c|o|l)

Or any substring of two or more characters from the searched word? (co|oo|ol)

Or are you only considering substrings starting from the beginning of the searched word? (co, or just c)
User 15221028 30-Jun-21 3:50am    
Sorry for not being very specific. Basically, I want to match anything that contains any character in the searched word. (c|o|l)

1 solution

Since you want to match any character from the entered word, you'll need to construct your regex to do just that:
const word = document.getElementById("searchedWord").value; // Eg: "cool"
const allCharacters = word.split("");                       // ["c", "o", "o", "l"]

// Optional: remove duplicate characters:
const characterSet = new Set(allCharacters);
const uniqueCharacters = [...characterSet];                 // ["c", "o", "l"]

const pattern = `(${uniqueCharacters.join("|")})`;          // c|o|l
const r = new Regex(pattern, "ig");                         // /(c|o|l)/ig
Share this answer
User 15221028 30-Jun-21 4:00am    
Thank you very much for the solution provided!
User 15221028 30-Jun-21 4:58am    
I applied your solution to my code found here on JSFiddle ( ) but I found something strange.

If I'm clicking button Find for the second time, I'm seeing results from HTML code and can't figure it out why. Being a junior web developer isn't easy sometimes.

It is possible for you to take a look to this also? Many thanks!
Richard Deeming 30-Jun-21 5:10am    
You're matching against the element's HTML, which includes <span class="found">.

Since you're looking for any instance of "c", "o", or "l", both the "cl" at the start of "class" and the "o" in "found" are matched.

You're then trying to wrap those matches in spans, which produces invalid HTML:
<span <span class="found">c</span><span class="found">l</span>ass="f<span class="found">o</span>und">c</span>

Each time you repeat the search, the problem will only get worse.

Start by removing the "found" spans from the element's HTML:

Depending on your actual markup, you may still have problems. But for the demo, this resolves the immediate issue.
User 15221028 30-Jun-21 7:07am    
Many thanks again for your help so far!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900