Convert multi-lined variable into a single lined variable using Javascript?

Question

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

Try something like this - http://stackoverflow.com/questions/3115360/multi-line-string-insert-using-jquery — irrelephant, Sep 05 '12 at 02: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, Sep 05 '12 at 02: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, Sep 05 '12 at 02:29

score 3 · Answer 1 · answered Sep 05 '12 at 02:25

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 common pure-JS solution is to join an array of strings:

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

answered Sep 05 '12 at 02:25

rjz

16,182
3
36
35

This is great but I need it some how automated because the user will be writing this html themselves and I don't want them having to add all the ' to the html. – Olokoo Sep 05 '12 at 02:30
1

You're trusting your users with arbitrary HTML? You're braver than I thought. – Blazemonger Sep 05 '12 at 02:58

score 2 · Answer 2 · answered Sep 05 '12 at 02:27

2

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

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

answered Sep 05 '12 at 02:27

elclanrs

92,861
21
134
171

This is great but I need it some how automated because the user will be writing this html themselves and I don't want them having to add all the + and ' to the html. – Olokoo Sep 05 '12 at 02:29
What do you mean by that? Where are the users typing the HTML? How are you getting it or storing it? – elclanrs Sep 05 '12 at 02:30
Ian, in that case you shouldn't have any problems.. assuming you're not using eval. – Radu Sep 05 '12 at 02:31
I am using html5 local storage and they are typing it into a text area. – Olokoo Sep 05 '12 at 02:32

Oriol · Accepted Answer · 2012-09-05T03:12:15.637

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.net/bYsTy/6/

I needed something to Format the SQL Script out of SQL Server Management Studio. This code of yours has made my job 100x faster. Thank you, Oriol. — Wayne Barron, Feb 17 '17 at 12:32

Ricardo Alvaro Lohmann · Answer 4 · 2012-09-05T03:02:17.110

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

I like this idea, but how come something like this won't work? http://jsfiddle.net/bYsTy/4/ — Olokoo, Sep 05 '12 at 02:58
@Ian34 To build a multiple line string you have to do what rjz or eclanrs answered, like this: http://jsfiddle.net/bYsTy/5/ — Ricardo Alvaro Lohmann, Sep 05 '12 at 03:01

score 0 · Answer 5 · answered Sep 05 '12 at 03:07

0

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"]);

answered Sep 05 '12 at 03:07

tsukimi

1,605
2
21
36

Convert multi-lined variable into a single lined variable using Javascript?

5 Answers5