CODEWITHSUNDEEP
javascriptreactjswhitespacetrimremoving-whitespace
astroboy
astroboy

Reputation: 53

React / Javascript - Remove white spaces from both ends of a string and extra spaces between words, from a input field (search bar)

I have a search bar that fetches movies from an API with the name of the movie [ on every keystroke].
I want to trim the extra spaces from both before and after the name, and only have one space between words..

[It should send the clean string to the query to be fetched]

example:
[(what i'm typing) ==> (what should be queried)]
" gran torino " ==> "gran torino"
" Pirates of the Caribbean " ==> "Pirates of the Caribbean"

search field
state value

code:

const fetchMovieList = async (query) => {
        if (query !== '') {
            setStatusFetch('loading');
            try {
                const res = await fetch(`[API]=${query}`);
                const movieListFromApi = await res.json();
                if (movieListFromApi.Response === 'True') {
                    setStatusFetch('resolved');
                    setStatusMovie('found');
                    setMovieList(movieListFromApi.Search);
                } else {
                    setMovieList([]);
                    setStatusMovie('notFound');
                }
                setStatusFetch('idle');
            } catch (error) {
                setStatusFetch('rejected');
            }
        } else {
            setMovieList([]);
            setStatusMovie('');
        }
    };

const myDebouncedFunction = useCallback(debounce((query) => fetchMovieList(query), 1000), []);

const handleSearch = ({ target: { value: inputValue } }) => {
    setSearchInputValue(inputValue);
    myDebouncedFunction(inputValue);
};

<SearchBar 
    type='text' 
    name='query' 
    placeholder='Search movies...' 
    value={searchInputValue} 
    onChange={handleSearch} 
    icon='fa fa-search' />

NON WORKING SOLUTIONS
- .trim() doesn't allow me to use spaces between words..
- onBlur won't help either because i wont unfocus from the search bar. (Remove white spaces from both ends of a string inside a form - React)
- several regex expressions that i tried wouldn't allow spaces between words to (like .trim()) (https://stackoverflow.com/a/7636022/3186426)

How can i do it?? Im i missing something?
Thank you!

Upvotes: 3

Views: 18823

Answers (4)

Tiago
Tiago

Reputation: 378

It looks like you are trying to trim an input while you are typing. If you trim while you type, you will not be able to add spaces between text.

You can let the user type whatever they want on the input, and before you do that API call, you remove the spaces using the removeExtraSpace example above, and then when the request finish you can, if you want update the input value.

Check the example: https://codesandbox.io/s/trim-before-8efz5

Upvotes: 3

Jason
Jason

Reputation: 67

With a simple and quick one liner.

"  Pirates  of      the    Caribbean     ".replace(/\s{2,}/g,' ').trim() 

// "Pirates of the Caribbean"

Upvotes: 2

Colin
Colin

Reputation: 1215

const test = "  Pirates  of      the    Caribbean     ";

const removeExtraSpace = (s) => s.trim().split(/ +/).join(' ');

console.log(removeExtraSpace(test))

You may want to check if string is empty first

Upvotes: 7

Prakash Reddy Potlapadu
Prakash Reddy Potlapadu

Reputation: 1001

    let data="  Pirates  of      the    Caribbean     "
    let data1=data.trim().split('  ').filter(word=>word!=='')
    console.log(data1)
   data=data1.join(' ')
    console.log("Data=",data)

Upvotes: 0

Related Questions