Convert string to HTML in JavaScript

Question

I have a string being sent to my JavaScript function from my C# code which has a text like:

 Hi <b>Welcome to C#<sup>5.0</sup></b>

I'm populating a div with this string. I need this html content to be rendered in the screen with the bold and superscript applied as below

Hi Welcome to C#^5.0

I tried the below it just displays the HTML tags as plain text

myfunction = function(data) {
  var mytext = '<div>'+ data +'</div>;
  $('#mydivid').after(mytext);
}

Is there any other solution neither like the one given here nor like this ?

Note: I cannot declare the string in a hidden variable in my .cshtml file within @HTML.Raw and again use it in my JavaScript.

I have tried using $.parseHTML but I got an error saying

$.parseHTML is not a function

Any solution other than the above solutions are welcome. Thanks in advance.

You've tagged this question as `jquery`, so why aren't you using the `html()` function? — Adrian Wragg, Dec 21 '16 at 11:54
you can directly replace this line `var mytext = '
'+ data +'
;` with razor syntax `var mytext = '
'+ '@Html.Raw(data)' +'
;` ... As you said `I cannot declare the string in a hidden variable` .. so with this syntax there is no need of variable — Rajshekar Reddy, Dec 21 '16 at 12:03
@RajshekarReddy are you telling me include Html.Raw in my .js file. Is that possible? No right? — Sethu Bala, Dec 21 '16 at 12:08
@SethuBala oh... I didnt know the code was in a JS file.. then that wont work.. — Rajshekar Reddy, Dec 21 '16 at 12:08
@SethuBala but still there is a plugin which enables the power to use Razor syntax in .js file https://www.nuget.org/packages/RazorJS — Rajshekar Reddy, Dec 21 '16 at 12:10
@RajshekarReddy Is there any other way rather than adding a plugin? — Sethu Bala, Dec 21 '16 at 12:24

selvakumar · Accepted Answer · 2016-12-22T08:58:11.183

3

seems like nothing is wrong with your code. Check if some css is overriding the basic em and sup functionality.

for Example the default style of em is font-style: italic which chould be override by your css

edited Dec 22 '16 at 08:58

answered Dec 21 '16 at 13:00

selvakumar

Yeah! You were right. I had to override my css. Thank you :) – Sethu Bala Dec 21 '16 at 13:10

score 2 · Answer 2 · answered Dec 21 '16 at 12:03

2

Try like this

myfunction = function(data) {
  $('#mydivid').html('<div>' + data + '</div>');
}

answered Dec 21 '16 at 12:03

Komal

This solution will work well for replacing .append() (sorry that was a late edit in my question) with .html() but in my case I'm using .after(). So what should I do for this case. – Sethu Bala Dec 21 '16 at 12:13
try like this $('#mydivid').after('
' + data + '
'); – Komal Dec 21 '16 at 12:19
Tried but no improvement – Sethu Bala Dec 21 '16 at 12:23

Miguel Coder · Answer 3 · 2016-12-21T12:44:21.520

1

You listed JQuery in your tags so I figured this would help.

html = $.parseHTML(  'Hi <b>Welcome to C#<sup>5.0</sup></b>' );

Check out this JSFiddle

You can also do this if you want a javascript oneliner.

document.getElementById("mydivid").innerHTML="Hi <b>Welcome to C#<sup>5.0</sup></b>";

edited Dec 21 '16 at 12:44

answered Dec 21 '16 at 11:59

Miguel Coder

Tried this solution already and got error as "$.parseHTML is not a function" – Sethu Bala Dec 21 '16 at 12:00
Are you sure you have Jquery included in your scripts? – Miguel Coder Dec 21 '16 at 12:02
Yes. I'm pretty sure about that :) – Sethu Bala Dec 21 '16 at 12:03
What version are you running? – Miguel Coder Dec 21 '16 at 12:04
jQuery version "1.7.1" – Sethu Bala Dec 21 '16 at 12:17
parseHTML was added in 1.8 – Miguel Coder Dec 21 '16 at 12:40
Try this document.getElementById("mydivid").innerHTML="Hi Welcome to C#^5.0"; – Miguel Coder Dec 21 '16 at 12:44
You can also do += if you want to append html – Miguel Coder Dec 21 '16 at 12:47

3 Answers3