I have to work with a series of JSON files that have HTML inside them. I need to use that HTMl to format the body text of a series of pages and cannot use templates for this information.
I know jQuery has the .html() method which can be used to parse the JSON string as HTML.
Is there a better way using Angular? I would rather not use jQuery for my app.
Thanks.
use ng-html-bind directive in your html...
HTML
<div ng-controller="ngBindHtmlCtrl">
<p ng-bind-html="myHTML"></p>
</div>
where myHTML is your html string...
CONTROLLER
$scope.myHTML = 'I am an <code>HTML</code>string with links! and other <em>stuff</em>';
Related
We have a project which uses drupal as a CMS.we get some data in a string format.
Some of the strings contains html tags in them.
<p>some text</p> : this is a string.
As usual when we render it in our React component the string "some text" becomes <p>some text</p>.
My question is how to parse the string as a DOM element in jsx and also can apply styles to those tags like <p>, <strong>...
Is there a way we can use?
Thanks in advance!
I found a very nice react package for the problem, where it solved everything and with the CSS targeting the child component I was able to change the styling.
html-react-parser
just install it and use it like :
let someTextvariable: any = HTMLReactParser(props.information);
Thanks to everyone.
I have the following JSON object:
comment: "Test Comments Feature<br>"
When I display it on my modalBox, $('#myModal #comments'+i+'').text(test.comment);
the HTML tag isn't being rendered:
Output: Test Comments Feature<br>
I tried using JSON.parse(test.comment) and JSON.stringify(test.comment)
But I could not achieve the desired result:
Test Comments Feature
What am I missing?
Can JSON objects render HTML automatically?
.text() method will strip html tags, use .html() method instead:
$('#myModal #comments'+i+'').html(test.comment);
I have a JSON object that looks like the following:
id:
text: <h1>This is my text</h1> <p> I want to include HTML
and reflect those tags on the page. </p>
I'm using Angular2's HTTP_PROVIDER to read the data from the JSON.
In my HTML template, I am displaying the JSON.dataString on the webpage. How do I reflect the HTML tags on the webpage, currently the tags are displayed as plain text.
<p>{{jsonObject.text}}</p>
Is there a way to read in those HTML tags that are included in the JSON objects, and have them reflected on the webpage?
Something like:
<div [innerHTML]="jsonObject.text"></div>
Should display the text object as raw HTML. Be careful about XSS injection when you do something like this.
More detail at this question.
You may try to do it like this:
function textHtml(input) {
var el = document.createElement("textarea");
el.innerHTML = input;
return el.value;
}
And then use this function to get text with tags
I don't use Angular but do something like that.
<p id="myId"></p>
<script>
document.getElementById("myId").appendChild(jsonObject.text);
</script>
I did not test it.
Suppose I have a string <span class="msg">Text goes here</span>.I need to use this string as a HTML element in my webpage. Any ideas on how to do it?
Mithril provides the m.trust method for this. At the place in your view where you want the HTML output, write m.trust( '<span class="msg">Text goes here</span>' ) and you should be sorted.
Mithril it's powerfull thanks to the virtual dom, in the view you if you want to create a html element you use:
m("htmlattribute.classeCss" , "value");
So in your case:
m("span.msg" , "Text goes here");
Try creating a container you wish to hold your span in.
1. Use jQuery to select it.
2. On that selection, call the jQuery .html() method, and pass in your HTML string.
($('.container').html(//string-goes-here), for example)
You should be able to assign the inner HTML of the container with the string, resulting in the HTML element you want.
Docs here.
I have a string, read from a database, that contains HTML that I want to output. Despite applying HttpUtility.HtmlDecode(), the View always renders the string as encoded HTML (i.e. <SPAN> instead of <SPAN>).
I am using:
string test = WebUtility.HtmlDecode(myStr);
<span>#test</span>
I have tried:
string test = HttpUtility.HtmlDecode(myStr);
<span>#test</span>
<span>#HttpUtility.HtmlDecode(myStr)</span>
Use Html.Raw()
#Html.Raw("<span>Hello</span>")
All the output from helpers and other elements in Razor are put through HttpUtility.HtmlEncode, unless they implement IHtmlString. But your best option here is using Html.Raw()
You need to use #Html.Raw:
#Html.Raw("<h1>Header</h1>")
Will output the text Header.
Try this helper method
#Html.Raw(myStr)