Storing HTML or XML code in javascript variables

Question

I'd like to store a some HTML/XML markups in a javascript variable. The problem is that the text is relatively large. For example how can I store the following XML piece in a javascript variable?

    <QuestionForm xmlns="[the QuestionForm schema URL]">
  <Overview>
    <Title>Game 01523, "X" to play</Title>
    <Text>
      You are helping to decide the next move in a game of Tic-Tac-Toe.  The board looks like this:
    </Text>
    <Binary>
      <MimeType>
        <Type>image</Type>
        <SubType>gif</SubType>
      </MimeType>
      <DataURL>http://tictactoe.amazon.com/game/01523/board.gif</DataURL>
      <AltText>The game board, with "X" to move.</AltText>
    </Binary>
    <Text>
      Player "X" has the next move.
    </Text>
  </Overview>
  <Question>
    <QuestionIdentifier>nextmove</QuestionIdentifier>
    <DisplayName>The Next Move</DisplayName>
    <IsRequired>true</IsRequired>
    <QuestionContent>
      <Text>
        What are the coordinates of the best move for player "X" in this game?
      </Text>
    </QuestionContent>
    <AnswerSpecification>
      <FreeTextAnswer>
        <Constraints>
          <Length minLength="2" maxLength="2" />
        </Constraints>
        <DefaultText>C1</DefaultText>
      </FreeTextAnswer>
    </AnswerSpecification>
  </Question>
  <Question>
    <QuestionIdentifier>likelytowin</QuestionIdentifier>
    <DisplayName>The Next Move</DisplayName>
    <IsRequired>true</IsRequired>
    <QuestionContent>
      <Text>
        How likely is it that player "X" will win this game?
      </Text>
    </QuestionContent>
    <AnswerSpecification>
      <SelectionAnswer>
        <StyleSuggestion>radiobutton</StyleSuggestion>
        <Selections>
          <Selection>
            <SelectionIdentifier>notlikely</SelectionIdentifier>
            <Text>Not likely</Text>
          </Selection>
          <Selection>
            <SelectionIdentifier>unsure</SelectionIdentifier>
            <Text>It could go either way</Text>
          </Selection>
          <Selection>
            <SelectionIdentifier>likely</SelectionIdentifier>
            <Text>Likely</Text>
          </Selection>
        </Selections>
      </SelectionAnswer>
    </AnswerSpecification>
  </Question>
</QuestionForm>

Solution 1

var string = (<r><![CDATA[

   The text string goes here.  Since this is a XML CDATA section,
   stuff like <> work fine too, even if definitely invalid XML. 

]]></r>).toString();

Solution 2

I assume your question is how to take that exact string, and not one you retrieve from a web service or Ajax call or the like. While this is a pretty bad idea for lots of reasons, to answer the question...

---

There is no really good way of doing this in JavaScript. Some browsers support line continuation by placing a \ at the end of the line, so you would do something like:

var xml = '<QuestionForm xmlns="[the QuestionForm schema URL]">\
  <Overview>\
    <Title>Game 01523, "X" to play</Title>\
    ...';

But this is nonstandard, and in fact directly contradicts the JS spec:

A 'LineTerminator' character cannot appear in a string literal, even if preceded by a backslash.

The only really reliable way of doing this would be with manual string concatenation:

var xml = '<QuestionForm xmlns="[the QuestionForm schema URL]">' + "\n" +
'      <Overview>' + "\n" +
'        <Title>Game 01523, "X" to play</Title>' + "\n" +
'        ...';

You can make this a bit neater like so:

var xml = ['<QuestionForm xmlns="[the QuestionForm schema URL]">',
'      <Overview>',
'        <Title>Game 01523, "X" to play</Title>'
'        ...'].join("\n");

But it still sucks.

Also, with all of these approaches, you would have to escape any single quotes, i.e. replace ' with \'. I didn't see any in your XML snippet at first glance though, which is good.

Solution 3

I think you might have wanted to store html/xml code in javascript and display in textarea or some other input elements. If this is your intention this will help you.

Instead of javascript variable, store your code in a div and hide using css ex: display:none. When you want to show the code, you can use $('#div id').text().

Comments

[outis]

What, exactly, is the difficulty? Are you wondering about format (e.g. as a string, or as a DOM object)? Something else?

[Mark]

I'd like to find the easiest way to store this as an string.

[Mark]

Thanks but this does not work in Chrome, gives me "Unexpected Token <"

[Domenic]

What kind of crazy moon language is this!? Not JavaScript, for sure.

[Pentium10]

Do you know any other cross browser way that we can include HTML to variables?

[omikron]

Am I getting it right. We can't have '\n' in JavaScript strings?