Line Break in XML? [duplicate]

Question

This question already has an answer here:

• How to add a newline (line break) in XML file? 2 answers

I'm a beginner in web development, and I'm trying to insert line breaks in my XML file. This is what my XML looks like:

<musicpage>
   <song>
      <title>Song Title</title>
      <lyric>Lyrics</lyric>
   </song>

    <song>
      <title>Song Title</title>
      <lyric>Lyrics</lyric>
   </song>

    <song>
      <title>Song Title</title>
      <lyric>Lyrics</lyric>
   </song>

    <song>
      <title>Song Title</title>
      <lyric>Lyrics</lyric>
   </song>
</musicpage>

I want to have line breaks in between the sentences for the lyrics. I tried everything from /n, and other codes similar to it, PHP parsing, etc., and nothing works! Have been googling online for hours and can't seem to find the answer. I'm using the XML to insert data to an HTML page using Javascript.

Does anyone know how to solve this problem?

And this is the JS code I used to insert the XML data to the HTML page:

<script type="text/javascript">

    if (window.XMLHttpRequest) {
    xhttp=new XMLHttpRequest();
} else {
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","xml/musicpage_lyrics.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("songs");
for (i=0;i<x.length;i++) {
    document.write("<p class='msg_head'>");
    document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
    document.write("</p><p class='msg_body'>");
    document.write(x[i].getElementsByTagName("lyric")[0].childNodes[0].nodeValue);
    document.write("</p>");
}
</script>

Answer 1

just use <br> at the end of your lines.

Answer 2

If you are using CSS to style (Not recommended.) you can use display:block;, however, this will only give you line breaks before and after the styled element.

Answer 3

If you use CDATA, you could embed the line breaks directly into the XML I think. Example:

<song>
    <title>Song Title</title>
    <lyric><![CDATA[Line 1
Line 2
Line 3]]></lyric>
</song>

Answer 4

In the XML: use literal line-breaks, nothing else needed there.

The newlines will be preserved for Javascript to read them [1]. Note that any indentation-spaces and preceding or trailing line-breaks are preserved too (the reason you weren't seeing them is that HTML/CSS collapses whitespace into single space-characters by default).

Then the easiest way is: In the HTML: do nothing, just use CSS to preserve the line-breaks

.msg_body {
    white-space: pre-line;
}

But this also preserves your extra lines from the XML document, and doesn't work in IE 6 or 7 [2].

So clean up the whitespace yourself; this is one way to do it (linebreaks for clarity - Javascript is happy with or without them [3]) [4]

[get lyric...].nodeValue
    .replace(/^[\r\n\t ]+|[\r\n\t ]+$/g, '')
    .replace(/[ \t]+/g, ' ')
    .replace(/ ?([\r\n]) ?/g, '$1')

and then preserve those line-breaks with

.msg_body {
    white-space: pre; // for IE 6 and 7
    white-space: pre-wrap; // or pre-line
}

or, instead of that CSS, add a .replace(/\r?\n/g, '<br />') after the other JavaScript .replaces.

(Side note: Using document.write() like that is also not ideal and sometimes vulnerable to cross-site scripting attacks, but that's another subject. In relation to this answer, if you wanted to use the variation that replaces with <br>, you'd have to escape <,&(,>,",') before generating the <br>s.)

--

[1] reference: sections "Element White Space Handling" and "XML Schema White Space Control" http://www.usingxml.com/Basics/XmlSpace#ElementWhiteSpaceHandling

[2] http://www.quirksmode.org/css/whitespace.html

[3] except for a few places in Javascript's syntax where its semicolon insertion is particularly annoying.

[4] I wrote it and tested these regexps in Linux Node.js (which uses the same Javascript engine as Chrome, "V8"). There's a small risk some browser executes regexps differently. (My test string (in javascript syntax) "\n\nfoo bar baz\n\n\tmore lyrics \nare good\n\n")

Answer 5

@icktoofay was close with the CData

<myxml>
    <record>
        <![CDATA[
        Line 1 <br />
        Line 2 <br />
        Line 3 <br />
        ]]>
    </record>
</myxml>

Answer 6

At the end of your lines, simply add the following special character: 


That special character defines the carriage-return character.