How do I write regexp in JS to take into consideration a partial word?

Question

1.00/5 (1 vote)

See more:

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");

Posted 29-Jun-21 6:06am

User 15221028

Updated 29-Jun-21 21:57pm

Add a Solution

Comments

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Accepted Answer · 2021-06-29T21:57:00

Solution 1

Since you want to match any character from the entered word, you'll need to construct your regex to do just that:

JavaScript

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

Posted 29-Jun-21 21:57pm

Richard Deeming

Comments

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 ( https://jsfiddle.net/onwebpix/2obdpvf8/30/ ) 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:
Demo[^]

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!