How to format an XML string with line breaks using Javascript?

Question

What I'm trying is to format a string variable, which represents an XML file, with line breaks.

// This represents an XML file, but it's not formatted
let xmlStr = "<?xml version="1.0"?><?meta name="test"?><Foo>  <Bar>   <FooBar/>  </Bar></Foo>";

Now, I'm trying to come up with a function to format the string

xmlStr = formatXmlStr(xmlStr);
console.log(xmlStr);

The console.log above is supposed to print the following.

<?xml version="1.0"?>
<?meta name="test"?>
<Foo>
  <Bar>
   <FooBar/>
  </Bar>
</Foo>

I found that Javascript offers XMLSerializer, which returns an XML string based on a DOM object. However...

const docObj = (new DOMParser()).parseFromString(xmlStr, 'text/xml');
const xmlString = (new XMLSerializer()).serializeToString(docObj);

console.log(xmlString);

The resulting xmlString isn't formatted (i.e. It has no line breaks).

Is it possible to add line breaks to an XML string with Javascript?

UPDATE

Formatting has to be done without changing tabs (or blank spaces) in the XML string. This means, for example, solutions posted on this link won't be used because the resulting strings will have different lengths of tabs.

Does this answer your question? Formatting Output String from XMLSerializer().serializeToString — wuerfelfreak
– wuerfelfreak, Commented Jan 3, 2021 at 8:01
It's possible, yes. It's just a string after all. The question is, how do you determine where to insert the line breaks. What have you tried so far? — user5734311
– user5734311, Commented Jan 3, 2021 at 8:08
@wuerfelfreak, thank you for your suggestion. Unfortunately, the solutions posted on the link weren't really desirable. Both of the solutions are inserting not only line breaks but also tabs. I'm in a situation where it's not allowed to change anything in the XML other than formatting. So, adding tabs isn't allowed. Does this make sense? — Hiroki
– Hiroki, Commented Jan 3, 2021 at 9:07

wuerfelfreak · Accepted Answer · 2021-01-03 09:29:52Z

2

If there is no text between the xml-tags like in the example you presented (e.g. <foo><bar></foo> and not <foo>Some Text</foo>) one can simply do the following:

xmlStr.replaceAll(">",">\n")

which results in

<?xml version="1.0"?>
<?meta name="test"?>
<Foo>
  <Bar>
   <FooBar/>
  </Bar>
</Foo>

answered Jan 3, 2021 at 9:29

wuerfelfreak

2,4371 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jose Manuel Barrios Lacruz · Accepted Answer · 2024-01-25 14:13:13Z

0

You can simple use the label <pre> {Your XML string} </pre> in your html file.

Example:

const response = "<item><FACTURA>91860338</FACTURA><FOLIO>0000000000000000</FOLIO> <IDOC>0000000000000000</IDOC><PEDIDO>0001661927</PEDIDO></item>"

<div>
   <pre>{{response}}</pre>
</div>

And the result in the browser:

<item>
    <FACTURA>91860338</FACTURA>
    <FOLIO>0000000000000000</FOLIO>
    <IDOC>0000000000000000</IDOC>
    <PEDIDO>0001661927</PEDIDO>
</item>

answered Jan 25, 2024 at 14:13

Jose Manuel Barrios Lacruz

3654 silver badges4 bronze badges

Collectives™ on Stack Overflow

How to format an XML string with line breaks using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related