JSFiddle - React, Tailwind, and code Playground

by tlarson

HTML

<input data-bind="value: comment, valueUpdate:'afterkeydown'"></input>

<button data-bind="click: stringifyThenParse">Stringify Then Parse</button> 
<div data-bind="text:result"</div>

JavaScript

var vm = function(){
    var self = this;
    self.comment = ko.observable();

    // validate and remove bad characters    
    self.comment.subscribe(function(newValue){
        // u2014 is unicode Em Dash
        var clean = newValue.replace(/\u2014/g, "X");
        if (clean !== newValue)
        {
            self.comment(clean);
            console.log(self.comment());
        }
    });
    
    self.stringifyThenParse = function() {
        var stringified = JSON.stringify(self.comment());
        console.log(stringified);
        var parsed = JSON.parse(stringified);
        console.log(parsed);
        self.result(parsed);
    };
    self.result = ko.observable();
};
ko.applyBindings(new vm());