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

【问题标题】：React / Javascript - Remove white spaces from both ends of a string and extra spaces between words, from a input field (search bar)React / Javascript - 从输入字段（搜索栏）中删除字符串两端的空格和单词之间的多余空格
【发布时间】：2020-06-29 21:35:29
【问题描述】：

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

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

示例：
[（我输入的内容）==>（应该查询的内容）]
" gran torino " ==> "gran torino"
" Pirates of the Caribbean " ==> "Pirates of the Caribbean"

search field
state value

代码：

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 也无济于事，因为我不会从搜索栏中失去焦点。 (Remove white spaces from both ends of a string inside a form - React)
- 我尝试过的几个正则表达式不允许单词之间有空格（如 .trim()) (https://stackoverflow.com/a/7636022/3186426)

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

【问题讨论】：

这能回答你的问题吗？ remove extra spaces in string javascript

标签： javascript reactjs whitespace trim removing-whitespace

【解决方案1】：

您在键入时似乎正在尝试修剪输入。如果在键入的同时进行修剪，您将无法在文本之间添加空格。

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

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

【讨论】：

【解决方案2】：

用一个简单快速的一个班轮。

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

// "Pirates of the Caribbean"

【讨论】：

【解决方案3】：

const test = "  Pirates  of      the    Caribbean     ";

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

console.log(removeExtraSpace(test))

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

【讨论】：

【解决方案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)

【讨论】：