React / Javascript - 从输入字段（搜索栏）中删除字符串两端的空格以及单词之间的多余空格

Question

我有一个搜索栏，可以从 API 中获取电影以及电影名称 [每次击键]。
我想修剪名称前后的多余空格，并且单词之间只有一个空格。

[它应该将干净的字符串发送到要获取的查询]

例如：
[(我正在输入的内容) ==> (应该查询的内容)]
" 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()）（/sf/answers/534521571/ /3186426 )

我该怎么做？？我错过了什么吗？
谢谢你！

Answer 1

const test = "  Pirates  of      the    Caribbean     ";

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

console.log(removeExtraSpace(test))

您可能想先检查字符串是否为空