从JSON对象中删除空格,但不包括引号内的空格。

6

我有一个 input[type="text"],我想将 JSON 对象作为配置粘贴进去。控制台输出的结果是完美的,所有内容都在一行中而且没有任何修整,但现在在这个 input 中有很多空格。我想要消除这些空格并替换 input 的值。

示例

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

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

那几乎完成了工作,但它也移除了引号内的空格。所以如果我有一个类似于"sentence":"Sure thing, good to go."的键/值,那么它会被转换为"sentence":"Surething,goodtogo.",而我想保留引号内的空格。 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"
}

期望的输出示例

{"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"}
  • 我尝试了 jQuery.trim( this.value ),但完全没有效果。
  • 我尝试了 this.value.replace(/\s+/g, ''),这会将整个字符串中的空格全部删除,包括引号内部的空格。虽然这可能是正确的结果,但我不知道如何仅删除引号外部的空格。

我猜测这个正则表达式可以被调整为跳过替换引号内部的空格,但我对此并不熟悉。


5
解析并重新序列化它。 - Pointy
实际期望的行为是什么? - Zargold
2个回答

14
使用正则表达式的选择运算符。

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

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

  • ("[^"]*") 捕获所有双引号内的文本块。因此,在上面的例子中,"sentence""Sure thing ..." 被捕获(即该部分将存储在索引1的临时缓冲区中)。

  • |

  • \s 匹配剩余字符串中的所有空格字符。因此,它不会触及先前匹配的部分。

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

更新:

不幸的是,当您在字符串值中转义引号时,正则表达式会出现错误并停止移除剩余键/值对的空格。

var stri = `"sentence \\"with escaped quotes\\" should not break": "Sure thing, good to go."`;
alert(stri.replace(/("(?:\\"|[^"])*")|\s/g, "$1"));


非常感谢你,Avinash。这正是我想要的。 - dvlden
1
嗨,Avinash。不幸的是,当您在字符串值中转义引号时,正则表达式会中断并停止删除剩余键/值对的空格。我一直在尝试在捕获组中的尾随引号上应用负回顾,但这会导致字符串中的空格被消耗,因为由于某种原因它不考虑开头的引号。如果您能想出一个改进版本,那就太好了。 - HInterface

3

尝试使用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 尽管我会将@Avinash_Raj的答案标记为正确。因为我要求可能的方法,并想知道如何使用正则表达式来实现它。 - dvlden

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接