React / Javascript - удаление пробелов с обоих концов строки и лишних пробелов между словами из поля ввода (строка поиска)

Question

У меня есть панель поиска, которая выбирает фильмы из API с именем mov ie [при каждом нажатии клавиши].
Я хочу обрезать лишние пробелы как до, так и после имени, и иметь только один пробел между словами ..

[Он должен отправить чистую строку в запрос для выборки]

пример:
[(что я печатаю) ==> (что следует запросить)]
" gran torino " ==> "gran torino"
" Pirates of the Caribbean " ==> "Pirates of the Caribbean"

поле поиска
состояние значение

код:

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' />

НЕ РАБОЧИЕ РЕШЕНИЯ
- .trim () не позволяет использовать пробелы между слова ..
- onBlur тоже не поможет, потому что я не сфокусируюсь на панели поиска. ( Удалите пробелы с обоих концов строки внутри формы - React )
- некоторые выражения регулярных выражений, которые я пробовал, не позволят пробелам между словами (например, .trim ()) ({ ссылка })

Как я могу это сделать ?? Я что-то упустил?
Спасибо!

Answer 1

Похоже, вы пытаетесь обрезать ввод во время набора текста. Если вы урежете во время ввода, вы не сможете добавлять пробелы между текстом.

Вы можете позволить пользователю вводить все, что ему нужно, на входе, и перед тем, как выполнить этот вызов API, вы удалите пробелы, используя removeExtraSpace пример выше, а затем, когда запрос завершается sh, вы можете, если хотите обновить входное значение.

Проверьте пример: https://codesandbox.io/s/trim-before-8efz5

Answer 2

const test = "  Pirates  of      the    Caribbean     ";

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

console.log(removeExtraSpace(test))

Вы можете проверить, является ли строка пустой первой

Answer 3

С простым и быстрым одним вкладышем.

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

// "Pirates of the Caribbean"

Answer 4

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