从JSON对象中删除空格，但不在引号内

So I have an input[type="text"], where I want to paste JSON object as configuration. Output in console is perfect, all inline without any trimming, but now in that input I have lots of spacing. I'd like to get rid of that spacing and replace the input value.

所以我有一个输入[type =“text”],我想将JSON对象粘贴为配置。控制台中的输出是完美的,所有内联都没有任何修剪,但现在在输入中我有很多间距。我想摆脱那个间距并替换输入值。

Example

$('#widget-json').on('input propertychange', function () {
    var string = this.value.replace(/\s+/g, ''),
        data = $.parseJSON( string );

    $(this).val( string );
});

That almost do the job, but it also removes spacing within quotes. So if I had a key/val like "sentence": "Sure thing, good to go.", that would get converted into "sentence":"Surething,goodtogo.", while I'd want to preserve spacing within quotes.

这几乎可以完成这项工作,但它也会删除引号内的间距。所以,如果我有一个像“句子”那样的键/值:“当然,好的去。”,这将被转换成“句子”:“Surething,goodtogo。”,而我想要保留引号内的间距。

JSON Object Example

JSON对象示例

{
    "widget-effect": 3,
    "widget-opacity-color": "#C7C9CF",
    "widget-opacity-slider": "50%",
    "widget-opt-close": false,
    "widget-opt-scroll": true,
    "widget-opt-totop": true,
    "widget-text": "Spacing required within quotes"
}

Desired Output Example

期望的输出示例

{"widget-effect":3,"widget-opacity-color":"#C7C9CF","widget-opacity-slider":"50%","widget-opt-close":false,"widget-opt-scroll":true,"widget-opt-totop":true,"widget-text": "Spacing required within quotes"}

I tried, jQuery.trim( this.value ) and that did not work at all.

我试过,jQuery.trim(this.value),但根本没用。

I tried, this.value.replace(/\s+/g, '') and that removed entire whitespace, even within quotes. I know that it is probably correct outcome, but I have no ideas how to remove it only outside of quotes.

我试过,this.value.replace(/ \ s + / g,'')并删除整个空格,即使在引号内也是如此。我知道这可能是正确的结果,但我不知道如何仅在引号之外删除它。

I am assuming that that regex could be fitted to skip replacing spacing inside of quotes, but I'm not really familiar with it at all.

我假设可以使用正则表达式来跳过替换引号内部的间距,但我根本不熟悉它。

2 个解决方案

#1

Use regex alternation operator.

使用正则表达式交替运算符。

var s = '"sentence": "Sure thing, good to go."';
alert(s.replace(/("[^"]*")|\s/g, "$1"))

What actually the above regex do?

实际上上面的正则表达式是做什么的?

("[^"]*") captures all the double quoted blocks. So in the above, "sentence" and "Sure thing ..." are captured (means this particular part would be stored into a temp buffer of index 1).

(“[^”] *“)捕获所有双引号块。所以在上面,”句子“和”当然......“被捕获(意味着这个特定部分将被存储到索引1的临时缓冲区中) 。
| OR
\s matches all the space characters from the remaining string. So it won't touch the previous matched parts.

\ s匹配剩余字符串中的所有空格字符。因此它不会触及以前匹配的部分。
$1 in the replacement part refers all the chars which are captured by the first capturing group. So chars in the first capturing groups are retained and the matched spaces got removed.

替换部分中的$ 1是指第一个捕获组捕获的所有字符。因此保留了第一个捕获组中的字符,并删除了匹配的空格。

#2

Try utilizing JSON.stringify

尝试使用JSON.stringify

$("#widget-json").on("input propertychange", function () {
    // var string = this.value.replace(/\s+/g, ''),
    var data = JSON.stringify($.parseJSON( this.value ));
    $(this).val( data );
});

var data = {
    "widget-effect": 3,
    "widget-opacity-color": "#C7C9CF",
    "widget-opacity-slider": "50%",
    "widget-opt-close": false,
    "widget-opt-scroll": true,
    "widget-opt-totop": true,
    "widget-text": "Spacing required within quotes"
};

document.write(JSON.stringify(data));

#1