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>

Answer 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();

Answer 2

I recommend you use JSON, matey. It is less verbose. And javascript has methods to handle it nicely. In case you need to work with XML later in your classes, you can write a simple adapter.

Answer 3

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.

Answer 4

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().