JSFiddle - React, Tailwind, and code Playground

by tlarson

HTML

<div>Type in some text into the box.  If you enter an Em Dash (&#8212), it will be automatically removed.  Copy and paste the Em Dash in this paragraph to the input box below to try it out.</div>

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

<div>Next, click the button to Stringify then Parse the data in the input box.  The result will be shown below.</div>

<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, "");
        if (clean !== newValue)
        {
            self.comment(clean);
        }
    });
    
    self.stringifyThenParse = function() {
        var stringified = JSON.stringify(self.comment());
        var parsed = JSON.parse(stringified);
        self.result(parsed);
    };
    self.result = ko.observable();
};
ko.applyBindings(new vm());