display string with markup in javascript

Question

I have a string with the following format :

" Data\r\n  more data <DIV> "

I want to display this string exactly including the leading spaces and line breaks.

" Data
   more data <DIV> "

I am currently using jquery to display this like

$("<small class='text-success'></small>").text(theString)

This nicely encodes any HTML elements to display but doesn't work for the leading spaces or line breaks.

I tried replacing the spaces with non breaking spaces but then the text method also encodes that too.

Is there a way to do this without manually encoding the whole string?

T.J. Crowder · Accepted Answer · 2018-05-25 10:26:20Z

1

This nicely encodes any HTML elements to display but doesn't work for the leading spaces or line breaks.

To do that, you'd want to use the white-space CSS property with the value pre, preline, or pre-wrap (but probably just pre). Ideally, do that by giving it a class you apply the styling to:

CSS:

.preformatted {
    white-space: pre;
}

and then

$("<small class='text-success preformatted'></small>").text(theString)

Example:

var theString = " Data\r\n  more data <DIV> ";
$("<small class='text-success preformatted'></small>").text(theString).appendTo(document.body);

.preformatted {
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But if necessary, you can do it inline:

$("<small class='text-success'></small>").css("white-space", "pre").text(theString)

Example:

var theString = " Data\r\n  more data <DIV> ";
$("<small class='text-success'></small>").css("white-space", "pre").text(theString).appendTo(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered May 25, 2018 at 10:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

John Hunter Over a year ago

This is spot on, I changed the small element to a pre and didn't need the white-space property

Bilal Alam · Accepted Answer · 2018-05-25 10:29:36Z

0

You can use template literals to use exact strings as it is

var string= `Data
             more data <DIV>`;

answered May 25, 2018 at 10:29

Bilal Alam

90412 silver badges27 bronze badges

Comments

visorvice1 · Accepted Answer · 2018-05-25 10:34:12Z

0

You can try replace "\r\n" with "<br/>". That should prolly work.

answered May 25, 2018 at 10:34

visorvice1

643 bronze badges

Collectives™ on Stack Overflow

display string with markup in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related