How to Effectively Search for Keywords in JavaScript Using the includes Method

Описание: Learn how to search for keywords in user input using JavaScript’s `includes` method for seamless results and error-free code.
---
This video is based on the question https://stackoverflow.com/q/65296006/ asked by the user 'hp3393' ( https://stackoverflow.com/u/14826011/ ) and on the answer https://stackoverflow.com/a/65296053/ provided by the user 'Unmitigated' ( https://stackoverflow.com/u/9513184/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Searching for keywords with javascript method search();

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Searching for Keywords in JavaScript: A Step-by-Step Guide

When it comes to processing user inputs in JavaScript, one common requirement is the ability to search for specific keywords within that input. Users often want to know if the keyword they typed in exists in a given string of text. In this post, we will explore a simple yet effective way to achieve this using the includes method in JavaScript.

The Problem

Imagine you have a program where users can input text and click a button to search for keywords within that text. If the keyword is found, your program should provide a friendly alert stating “found!,” and if it’s not found, you should alert “not found!”

However, you might run into issues if the code is not structured properly. For instance, an incorrect attempt to search for a keyword like this can lead to errors:

[[See Video to Reveal this Text or Code Snippet]]

The use of str.search here is problematic because you're trying to call search on a DOM element instead of the input value. Let's break down how to correct this step by step.

Analyzing the Errors

Getting the Input Value: You want to check the value of the input box, not the element itself. You need to access the value property.

Using the Right Method: The search method is not ideal for this purpose. Instead, using includes is more straightforward for checking if a string contains a specific substring.

Comparison Syntax: It’s essential to remember that = is an assignment operator, not a comparison operator. To compare values, you should use == or ===. However, in most cases, comparing boolean values is redundant, as they can be evaluated directly in conditions.

The Solution: Using includes Method

Now that we've outlined the problems let's rewrite the function correctly to search for the keyword using includes.

Here’s the revised version of your function:

[[See Video to Reveal this Text or Code Snippet]]

Complete HTML Code Example

Here’s how you can integrate this function with a simple HTML structure:

[[See Video to Reveal this Text or Code Snippet]]

Summary

To summarize, when searching for keywords in user input using JavaScript:

Use the value property of the input element to get user text.

Opt for the includes method for a more intuitive keyword search.

Avoid using assignment in conditional statements, instead, rely on the truthiness of evaluated expressions.

With these adjustments, your keyword search functionality will work flawlessly, providing a pleasant user experience. Happy coding!