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

Question

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!

Does this answer your question? remove extra spaces in string javascript — Emile Bergeron
– Emile Bergeron, Commented Mar 18, 2020 at 18:53

Colin · Accepted Answer · 2020-03-18 18:47:01Z

7

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

answered Mar 18, 2020 at 18:47

Colin

1,2158 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tiago · Accepted Answer · 2020-03-31 16:41:52Z

3

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

answered Mar 31, 2020 at 16:41

Tiago

3782 silver badges15 bronze badges

1 Comment

Gattu Over a year ago

How to do in React Native ?

Jason · Accepted Answer · 2020-03-18 18:49:46Z

2

With a simple and quick one liner.

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

// "Pirates of the Caribbean"

answered Mar 18, 2020 at 18:49

Jason

677 bronze badges

Comments

Prakash Reddy Potlapadu · Accepted Answer · 2020-03-18 18:44:33Z

0

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

answered Mar 18, 2020 at 18:44

Prakash Reddy Potlapadu

1,0111 gold badge9 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related