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

Question

我有一个搜索栏，可以从 API 中获取电影 [每次击键时都带有电影名称]。
我想 trim 名字前后的额外 space，并且单词之间只有一个 space..

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

示例：
[（我正在输入的内容）==>（应该查询的内容）]
" 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() 不允许我在单词之间使用 spaces..
- onBlur 也无济于事，因为我不会从搜索栏中分散注意力。 ()
- 我试过的几个正则表达式不允许单词之间的 spaces (比如 .trim()) ()

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

Answer 1

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

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

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

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

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

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

javascript

reactjs

whitespace

trim

removing-whitespace