I have a variable:

    var remoteControlPage = '
        <table>
            <tr>
                <td class="stats">sadfsadf</td>
            </tr>
        </table>
    ';

and I want to use it in a Jquery .html function like this:

    $("div.devices div.devicePage").html(remoteControlPage);

The problem is the html function wont work unless the new content is in a sing line. And this is not desirable when writing html.

So I was wondering if there is anyway to convert the var remoteControlPage into a single lined variable?

Thanks

I have a variable:

    var remoteControlPage = '
        <table>
            <tr>
                <td class="stats">sadfsadf</td>
            </tr>
        </table>
    ';

and I want to use it in a Jquery .html function like this:

    $("div.devices div.devicePage").html(remoteControlPage);

The problem is the html function wont work unless the new content is in a sing line. And this is not desirable when writing html.

So I was wondering if there is anyway to convert the var remoteControlPage into a single lined variable?

Thanks

• javascript
• jquery

Share Improve this question Follow asked Sep 5, 2012 at 2:22 OlokooOlokoo 1,14444 gold badges2020 silver badges3535 bronze badges 3

• 2 Try something like this - stackoverflow./questions/3115360/… – irrelephant Commented Sep 5, 2012 at 2:25
• Your HTML has to be a valid HTML string. What you are trying to do is not valid javascript. You can put a backslash at the end of each continued line to make it work. – jfriend00 Commented Sep 5, 2012 at 2:27
• That's not legal JavaScript -- have you tried in various browsers? Like jfriend says you can put backslashes at the end of each line but even that's not legal ECMAScript, it just happens that major browsers support it. – jpsimons Commented Sep 5, 2012 at 2:29

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

This issue isn't limited to .html() alone--rather, JS will not support multi-line strings without some help.

There are many templating solutions available to handle this for you, but one mon pure-JS solution is to join an array of strings:

var remoteControlPage = [
    '<table>',
      '<tr>',
        '<td class="stats">sadfsadf</td>',
      '</tr>',
    '</table>'
].join('');

You can't define a variable like this:

var remoteControlPage = '
    <table>
        <tr>
            <td class="stats">sadfsadf</td>
        </tr>
    </table>
';

In any case, you could have a textarea which is filled by the user with the text

<table>
    <tr>
        <td class="stats">sadfsadf</td>
    </tr>
</table>

And then you get it:

var remoteControlPage = mytextarea.value;

But when you do that the text is changed to

var remoteControlPage = "<table>\n    <tr>\n        <td class=\"stats\">sadfsadf</td>\n    </tr>\n</table>"

Then, if you want to remove the line-breaks, you can do

remoteControlPage = remoteControlPage.replace(/\s*\n\s*/g,"")

But you don't need that. If you say that the users will write the HTML, you can use a <textarea>, ...

<textarea id="txt">
<table>
    <tr>
        <td class="stats">Cell 1</td>
        <td class="stats">Cell 2</td>
    </tr>
</table>
</textarea>

...a button, ...

<button id="button">Click me!</button>

... and a output HTML viewer:

<div id="output">Here will go the output</div>

And then you just need

$('#button').click(function(){
    $('#output').html($('#txt').val());
});

Demo: http://jsfiddle/bYsTy/6/

In JS you have to concatenate those strings properly like this:

var remoteControlPage = 
    '<table>'
      +'<tr>'
        +'<td class="stats">sadfsadf</td>'
      +'</tr>'
    +'</table>';

You have to replace the \n.

remoteControlPage = remoteControlPage.replace(/\n/g, '');
console.log(remoteControlPage);
// output: "<table>        <tbody><tr>            <td class="stats">sadfsadf</td>        </tr>    </tbody></table>"

Or if you don't want the white spaces, you can use the following regex to remove it.
/\n|\s(?![^\s]*<\/td>)/g

Explanation:

• \s: Matches white space
• |: Used to match either \n or \s
• [^\s]: Matches everything except white space
• <\/td>: Matches the end or your td
• *: Matches the preceding element 0 or more times
• \s(?![^\s]*<\/td>): Matches white space only if followed by something which isn't a which space the followed by the end of td

so your code would be the following:

remoteControlPage.replace(/\n|\s(?![^\s]+<\/td>)/g, '');
console.log(remoteControlPage);
// output: <table><tbody><tr><tdclass="stats">sadfsadf</td></tr></tbody></table>

note: It will not remove whitespaces inside td.stats.

demo

You mentioned the html is in local storage , so dont use a JS variable and just set it straight from the storage.

 $("div.devices div.devicePage").html(localStorage["bar"]);