CODEWITHSUNDEEP
javascript
tester
tester

Reputation: 23189

a more graceful multi-line javascript string method

The only way I know how to print a huge string without using += is to use \ backslashes. ugly!

<div id="foo"></div>
<script type="text/javascript">
var longString = '<div id="lol">\
        <div id="otherstuff">\
            test content. maybe some code\
        </div>\
    </div>';

document.getElementById('foo').innerHTML = longString;
</script>

is there any way to do this where the longString is untainted? php has $foo = ''' long multiline string '''; I want this in javascript!

Anyone know of a better method for printing long, multi-line strings in javascript?

Upvotes: 8

Views: 6077

Answers (5)

Alain Beauvois
Alain Beauvois

Reputation: 5926

This works too :

var longString = 
  '<div id="lol">' +
    '<div id="otherstuff">' +
      'test content. maybe some code' +
    '</div>' +
  '</div>';

Upvotes: 1

slebetman
slebetman

Reputation: 113994

In general, the answer is: not in the language syntax. Though as Ken pointed out in his answer there are many work-arounds (my personal method is to load a file via AJAX). In your specific case though, I'd prefer creating a HTML constructor function so you can then define the HTML structure using javascript object literals. Something like:

var longString = makeHTML([{
  div : {
    id : "lol",
    children : [{
      div : {
        id : "otherstuff",
        children : [{
            text : "test content. maybe some code"
        }]
    }]
 }]

which I find to be much easier to handle. Plus, you this would allow you to use real function literals when you need it to avoid string quoting hell:

makeHTML([{
  span : {
    onclick : function (event) {/* do something */}
  }
}]);

note: the implementation of makeHTML is left as exercise for the reader

Additional answer:

Found some old code after a quick scan through my hard disk. It's a bit different from what I suggested above so I thought I'd share it to illustrate one of the many ways you can write functions like this. Javascript is a very flexible language and there is not much that forces you to write code one way or another. Choose the API you feel most natural and comfortable and write code to implement it.

Here's the code:

function makeElement (tag, spec, children) {
    var el = document.createElement(tag);
    for (var n in spec) {
        if (n == 'style') {
            setStyle(el,spec[n]);
        }
        else {
            el[n] = spec[n];
        }
    }
    if (children && children.length) {
        for (var i=0; i<children.length; i++) {
            el.appendChild(children[i]);
        }
    }
    return el;
}

/* implementation of setStyle is
 * left as exercise for the reader
 */

Using it would be something like:

document.getElementById('foo').appendChild(
  makeElement(div,{id:"lol"},[
    makeElement(div,{id:"otherstuff"},[
      makeText("test content. maybe some code")
    ])
  ])
);

/* implementation of makeText is
 * left as exercise for the reader
 */

Upvotes: 5

Chris Morgan
Chris Morgan

Reputation: 90842

One technique if you have a big block is a <script> tag with an invalid type. It will be ignored by browsers.

<script type="text/x-my-stuff" id="longString">
    <div id="lol">
        <div id="otherstuff">
            test content. maybe some code
        </div>
    </div>
</script>
<script type="text/javascript">
    var longString = document.getElementById("longString").text;
    document.getElementById('foo').innerHTML = longString;
</script>

Upvotes: 4

Jeff Meatball Yang
Jeff Meatball Yang

Reputation: 39057

You really could minimize this ugliness by creating your <div id="lol"> as HTML, and set its content with .innerHTML = "test content. maybe some code"

I don't like creating HTML in Javascript because of this exact issue, and instead use "template" elements which i simply clone then manipulate.

var lol = document.getElementById("template_lol").clone();
lol.firstChild.innerHTML = "code and stuff";
foo.appendChild(lol);

And this is the HTML:

<body>
<div>normal stuff</div>

<div style="display:none" id="templateBucket">
  <div id="template_lol"><div class="otherstuff"></div></div>
</div>
</body>

Upvotes: 1

Ken Redler
Ken Redler

Reputation: 23943

A few somewhat unattractive options are discussed in the answers to this question.

Upvotes: 1

Related Questions