How to format a string of html in json

I am working on a tool for generating html files. The code is fairly simple. A user clicks a post button and the content from a textarea is sent to an endpoint. I have tried posting the html as a json string.

Expected The saveContent method is called. The value from the textarea element is concatenated into a string. This string is the json that is sent to the server. Once the request is completed a 201 response should come back.

Actual The saveContent method is called. The value from the textarea element is concatenated into a string. This string is the json that is sent to the server. A 400 response comes back.

Here is an example of the string

{"content":"<div id="maincontentstyle">
    <center>
        <div id="boxstyle">
            <h3 id="title">title</h3>
                <center>
                    <div class="source">
                        <div id="s1" class="draggyBox-small">
                            k1
                        </div>
                        <div id="s2" class="draggyBox-small">
                            k2
                        </div>
                    </div>
                    </center>
                    <table id="tablestyle">
                        <tr>
                        <td id="row1">
                            <div id="t1" class="ltarget"></div>
                        </td >
                        <td id="d1">
                            d1
                            </td >
                        </tr>
                        <tr>
                        <td id="row2">
                            <div id="t2" class="ltarget"></div>
                        </td >
                        <td id="d2">
                            d2
                            </td >
                        </tr>
                    </table>
                </center>
        </div>
    </center>
</div>"}

This is the saveContent method

function saveContent(){
        console.log("calling save content");
        var html_content = document.getElementById("generated_html_textarea");
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/wordmatch", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.onreadystatechange = function()
        {
            if(xhr.readyState == 4 && xhr.status == 201) {
                console.log("content saved");
            }
            else{
                console.log("content was not save successfully");
            }
        }
        console.log('{"content":"'
                +html_content.value+'"}');
        xhr.send('{"content":"'
                +html_content.value+'"}');
    }

Answer

Don’t create JSON by concatenating strings. You’re not properly escaping all the nested quotes, converting newlines to n, etc.

Use JSON.stringify() on a JavaScript object:

xhr.send(JSON.stringify({content: html_content.value}));