从输入值显示JSON格式

时间:2017-02-23 10:31:05

标签: angularjs

我不明白,返回值返回的是字符串,而console.log显示完美的格式,这是必需的。

function syntaxHighlight(json) {
            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return match ;
            });
        }
        var obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };
        var str = JSON.stringify(obj , undefined, 4);

        console.log(syntaxHighlight(str));
        $scope.jsonText = syntaxHighlight(str);

HTML

  <form name="form" ng-submit="vm.frmFormatJSON()">
            <div class="form-group" >
                <label>Format JSON</label>
                <input type="text" class="form-control " placeholder="{}" ng-model="vm.formatJSON">
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-primary" ng-click="formatJSON">
                    Look
               </button>
            </div>
        </form>

CONSOLE.LOG

enter image description here

输出

enter image description here

更新 根据@Fissio的建议, 它的工作完美,但一旦我更新

var str = JSON.stringify(vm.formatJSON, undefined, 4);

它再次显示在1行中,也在输出的开头和结尾混淆了“”的原因。

0 个答案:

没有答案