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()）（ https://stackoverflow.com/a/7636022/3186426 ）

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

Answer 1

 const test = " Pirates of the Caribbean "; const removeExtraSpace = (s) => s.trim().split(/ +/).join(' '); console.log(removeExtraSpace(test))

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

Answer 2

看起来您正在尝试在打字时修剪输入。 如果在键入时进行修剪，将无法在文本之间添加空格。

您可以让用户在输入中输入他们想要的任何内容，在执行该 API 调用之前，您可以使用上面的removeExtraSpace示例删除空格，然后当请求完成时，如果您想更新输入值，则可以。

检查示例： https : //codesandbox.io/s/trim-before-8efz5

Answer 3

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

Answer 4

使用简单快捷的单衬。

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

// "Pirates of the Caribbean"