I am using laravel 5.0 and trying to use html tags in Response::json(), but the problem is the html elements are converted to plain text.
return Response::json([
'success' => true,
'message' => 'click <a href="#">here<a/>'
]);
the output is: click <a href="#">here<a/>
How should I fix this?
In this situation with output json all right.
I think that you want to display message on your front via javascript?
If yes - you must append data as HTML, not as plain text
Simple examle with using jQuery: (/testJson resturn json string as in your example)
<div id="testBlock"></div>
<script type="text/javascript">
jQuery.post('/testJson').done(function(result){
jQuery("#testBlock").html(result.message);
})
</script>
Related
Say I have the following code in my database (user input):
<html>
<title>Test</title>
<body>testing website</body>
</html>
And I fetched it correctly from my database using ReactJS. How can I display this in say: 'localhost:3000/play'? I don't want it to be rendered as raw data just like the code but I want it to actually render the html body as a website. (Title set to Test, and displays a small text: testing website). How can I do that in ReactJS? I already have /play configured and I just want to know how to display it there in the index.js file. I tried something like <div dangerouslySetInnerHTML={template} /> but it didn't work.
So, I fixed it with the following:
In a separate function:
db.getHTMLBody(key).then(snapshot => {
this.setState({ body: snapshot.val() })
})
then in the render:
<div dangerouslySetInnerHTML={{ __html: this.state.body }} />
Please try :
const innerHtml = { __html: escape(snapshot.val()) }
return(<div dangerouslySetInnerHTML={innerHtml} />)
I'm new to reactjs and working on a project that is pushing json data to the template.
json structure
"description" : "Some text with a link and another link",
I propose using the following on the template
<p className='paragraph-margin-bottom-10 text--font-size-14 paragraph--justified' dangerouslySetInnerHTML={{ __html: lang.privacy[0].description }} />
but in terms of the output - I would maybe need to append a set of classes to ALL links. What is the best practice for this
so the links render with the following
<a class="text--font-size-14 hyperlink-primary" href="#">link</a>
I can imagine that many people will not agree with me. You can actually do this. But you shouldn't. It is bad enough that you want to use dangerouslySetInnerHTML. It is possible to parse html but there are many edge cases that you would need to handle.
Either tell your backend that they should return the links with proper classes or target the links inside the description directly with css.
See some similar question like: Using regular expressions to parse HTML: why not?
Using regular expressions to parse HTML: why not?
This is how I would do it. I will write the regex later if you run into some problems. I don't have much time to spare right now. Hope it will help. :)
import React from 'react';
import { render } from 'react-dom';
const htmlFromApi = 'some html from API'
const attachClassesToLinks = (htmlWithLinks) => {
// do something special
return htmlWithLinks
}
const App = () => (
<div>
<h1>My Component</h1>
<p dangerouslySetInnerHTML={{ __html: attachClassesToLinks(htmlFromApi) }} />
</div>
);
render(<App />, document.getElementById('root'));
I used get json in ionic.
$http.get($scope.webServiceUrl+"example.php")
.then(function(response){
$rootScope.lists = response.data;
});
I wrote the webservice with php
echo json_encode($data,JSON_HEX_TAG);
return json data and print page
text: "<h1>enes</h1>"
Json [{"id":"0","text":"<h1>enes</h1>"}]
jsonviewer Image
Result when I print to the page
enter image description here
Does not accept is html element. How can i solve?
I think you have to use ng-bind-html directive if you are sure it's safe and can be rendered as unencoded HTML.
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
I'm trying to create a website using angular-js .I'm using rest api calls for getting data. I'm using ngSanitize as the data from rest call includes html character. Even if i use ng-bind-html in my view the html tags are not removed .What is the mistake in my code.Can anyone help me
var app = angular.module('app',['ngSanitize','ui.bootstrap']);
app.controller("ctrl",['$scope','$http','$location','$uibModal',function($scope,$http,$location,$uibModal,){
//here im making my rest api call and saving the data in to $scope.items;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
<body ng-app="app" ng-controller="ctrl">
<div class="hov" ng-repeat ="item in items">
<br/>
<div>
<hr class="divider" style="overflow:auto;">
<ul>
<li style="font-family: Arial, Helvetica, sans-serif;font-weight:900px;">
<h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name"></span></h3>
</li>
<li>
<h4>Description: <span ng-bind-html="item.description"></span></h4>
</li>
</ul>
</div>
</div>
</body>
So you want to allow HTML tags or deny them ?
If you want the html to be escaped in the data coming from your server, just use ng-bind. It will replace < with < and > with > thus showing the HTML tags instead of computing them.
If you want to completely remove any HTML tags
Try this filter
filter('htmlToPlaintext', function() {
return function(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
};
}
);
then in your HTML :
<h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name | htmlToPlaintext"></span></h3>
If you trust the source and want to compute the HTML it send you
You can use this filter
app.filter('trusted', function($sce){
return function(html){
return $sce.trustAsHtml(html)
}
});
then in your HTML :
<h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name | trusted"></span></h3>
And
<h4>Description: <span ng-bind-html="item.description | trusted"></span></h4>
I have the same problem before some time , then i created a filter for this problem, You can use this filter to do sanitize your html code:
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode) {
return $sce.trustAsHtml(htmlCode);
}
}]);
in html you can use like this:
<div ng-bind-html="businesses.oldTimings | sanitize"></div>
businesses.oldTimings is $scope variable having description of strings or having strings with html tags , $scope.businesses.oldTimings is the part of particular controller that you are using for that html.
see in the snapshot:
you can use limitHtml filter to do the same:
app.filter('limitHtml', function() {
return function(text, limit) {
var changedString = String(text).replace(/<[^>]+>/gm, ' ');
var length = changedString.length;
return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString;
}
});
Then you can add bothe filter in your html like that:
<p class="first-free-para" ng-bind-html="special.description| limitHtml : special.description.length | sanitize">
Hope it will work for you.
I have a URL I would like to render in an anchor tag as-is in a Razor view. I would have thought Html.Raw would be the way to go:
#{
string test = "http://someurl.com/someimage.png?a=1234&b=5678";
}
<div>
Test
</div>
But this doesn't work. The ampersand gets encoded and the HTML is rendered as:
<div>
Test
</div>
The strange thing is that if I do the Html.Raw call outside of the anchor tag, the HTML output is as expected:
<div>
#Html.Raw(test)
<div>
is rendered as:
<div>
http://someurl.com/someimage.png?a=1234&b=5678
</div>
Can anyone explain why this is?
Edit:
Tried a few other things out, and found that the following works as expected:
<div data-url="#Html.Raw(test)"></div>
outputs:
<div data-url="http://someurl.com/someimage.png?a=1234&b=5678"></div>
To add a little more context, my goal is not actually to use the URL in an anchor tag, since hrefs can be HTML encoded and still work (I just used the anchor tag case as an example). Rather I wish to use the URL in an <object> <param> value tag for a Flash object. The Flash object doesn't properly recognize the HTML encoded URL, but I can't get the raw URL to output correctly.
I am at a loss. Time to break out the MVC source code I guess...
This is happening because something in the pipeline (I'd guess razor but I'd need to look it up) attribute encodes all attribute values. This should not affect the browser from reaching your desired location however.
You can test this with the #Html.ActionLink(text, action, routeAttributes) overload.
#Html.ActionLink("Test", "Index", new { tony = "1", raul = 2 })
outputs
Test
In regards to your edit, you just need to make the entire <param> part of your raw value.
#{
var test = "<param src=\"http://someurl.com/someimage.png?a=1234&b=5678\">";
}
<div>
<object>
#Html.Raw(test)
</object>
</div>
Like this:
#{
string test = "http://someurl.com/someimage.png?a=1234&b=5678";
}
<div>
Test
</div>
produces valid markup:
<div>
Test
</div>
But this doesn't work. The ampersand gets encoded and the HTML is
rendered as:
But that's exactly how a valid markup should look like. The ampersand must be encoded when used as an attribute. Don't worry, the browser will perfectly fine understand this url.
Notice that the following is invalid markup, so you don't want this:
<div>
Test
</div>
Try
<div>
Test
</div>
just try below...
It works perfect.
#{
string test = "https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token="+#ViewBag.Token;
}
<div>
#Html.Raw(System.Web.HttpUtility.HtmlDecode(test))
</div>
why don't you use jquery to post the url:
$(function () {
$('form').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: { a:'firstvalue', b: 'secondvalue'},
success: function (result) {
//code for successful result
}
});
return false;
});
});
in controller
public ActionResult Fetch(string a, string b)
{
//write required codes here
return View();
}