JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Enter Something:</td>
        <td><input type="text" id="x" /></td>
    </tr>
    <tr>
        <td>Escape Quotes: </td>
        <td>
            <label><input type="radio" name="escape-quotes" value="" checked /> No Escaping</label>
            <label><input type="radio" name="escape-quotes" value="double" /> Double Quotes</label><br />
            <label><input type="radio" name="escape-quotes" value="backslash" /> Backslash</label>
        </td>
    </tr>
    <tr>
        <td>New Value:</td>
        <td><span id="x-modified"></span></td>
    </tr>
</table>

JavaScript

var whiteSpace = /\s/;
var quotes = /^\x22?(.*?)\x22?$/; // string || "string || string" || "string" || "str"ing" || etc.
var validate = function(){
    // First grab the value inside the field
    var xValue = $('#x').val();
    
		console.log(xValue.match(/(?:[^\s"]+|"[^"]*")+/g));
    
    // next, check for whitespace
    if (whiteSpace.test(xValue)){
        // there is white space. So now check for quotes. If there are quotes
        // (either surrounded or on one side) grab only the value (less the
        // quotes) then re-surround it.
        var xTempValue = xValue.match(quotes)[1] || xValue;
        
        // quote escaping (optional)
        var method = $('input[name=escape-quotes]:checked').val();
        if (method == 'double')
            xTempValue = xTempValue.replace(/\x22/g,'""'); // Version one of escaping quotes
        else if (method == 'backslash')
            xTempValue = xTempValue.replace(/\x22/g,'\\"'); // Version two of excaping quotes
        
        xValue = '"'+xTempValue+'"';
    }
    
    // dump the value now that's it's been interrogated
    $('#x-modified').text(xValue);
};
$('#x').keyup(validate);
$('input[name=escape-quotes]').change(validate);