Storing HTML or XML code in javascript variables

Mark picture Mark · Feb 26, 2011 · Viewed 15.6k times · Source

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

Domenic picture Domenic · Feb 26, 2011

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.