I have React frontend and strapi backend.
When inserting data into my strapi backend, the resulting output in my frontend contains html elements.
How can I show the output without the HTML elements? I have the following Gatsby code block,
import ReactMarkdown from "react-markdown"
<ReactMarkdown children={info_} />
The data within {info_} is outputted with the HTML elements, how can I use Dangerously Set innerHTML in my code or is there some other way to achieve this?
If you display an html node within the dangerouslySetInnerHTML property, you put your application at risk for XSS attacks. Long story short, the html could contain malicious code that would harm the user. If you do it, you need to sanitize the content before displaying it. The best option would be to use a battle-tested library such as sanitize-html-react.
You can use DOMParser to create a document from your HTML input and then extract the text like this:
new DOMParser().parseFromString(info_, 'text/html').body.textContent;
Here's an example using a functional form:
I tried putting this into a snippet demo, but the Stack Overflow snippet environment doesn't like something about the syntax. 🤷 ☹️ You can copy and paste it in your JS console to try it.
Note that the embedded script never runs, but its source text is included in the output. If you want just part of the created document's text, you can use a method like Document.querySelector on the created document rather than its body.
function getTextFromHtml (html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent ?? '';
}
// Use:
// assuming `info_` is a string of valid HTML like this:
const info_ = `
<div>
<p>Some text</p>
<p>Some more text</p>
<script>console.log('This script executed!')</script>
</div>
`;
const textContent = getTextFromHtml(info_);
console.log(textContent);
Afterward, you'll have plain text, so you won't need dangerouslySetInnerHTML.
Kramdown is now the default markdown renderer for Jekyll 4.0. I would like to know if there is a way to remove the end slash from the img tag.
For example:
<img src="flowers.jpg" alt="Flowers" />
One way until a few months ago was to using Redcarpet, but now is dropped.
How can I do?
Thanks for the support.
As said in my comment, this trailing slash is hard coded in Kramdown Html converter.
You can override this methods by creating a _plugins/my_img_tag.rb file :
module Kramdown
module Converter
class Html < Base
# Overriding method
def convert_img(el, _indent)
"<img#{html_attributes(el.attr)}>"
end
end
end
end
Note : this plugin will not work on Github pages.
You can use regular expressions for this:
The regex below catches what we want:
(<img)(.*\n*\t*\s*)(\/>)
Then, you can do a replace of the 3rd group:
$1$2>
I've tested with a few variations of the tag img:
Test using Sublime Text
From the linky docs it seems it should work with ng-bind-html. However, if the text contains html tags, then linky overrides the actual html interpretation to transform URLs into links.
This can be seen by for instance writing
Pretty text with some links:<br/><img src="http://something.com/lol.gif">
http://angularjs.org/,
mailto:us#somewhere.org,
another#somewhere.org,
and one more: ftp://127.0.0.1/.
in the example at the bottom of the linky docs page.
Is there a way to firstly sanitise and interpret html using ng-bind-html and only later parse the resulting text to add clickable links?
I have a text editor (textAngular) that I've modified to limit the number of valid HTML tags I can generate using that tool. Now, I want to only support a limited number of HTML elements (h3, h4, h5, h6, ol, ul) to produce a news story but I want to disable some of the valid HTML rendered by ng-bind-html. Namely, I want to remove , tags as a valid tags because they could have disastrous results for this user generated content.
Is it possible to remove and tags as something rendered by ng-bind-html?
Unfortunately no, it isn't possible to config the valid HTML tags.
The ng-bind-html use the $sanitize service to strip invalid tags/attributes, and you can see in the source code that all the configurations are private.
// Safe Block Elements - HTML5
var blockElements = angular.extend({}, optionalEndTagBlockElements, makeMap("address,article," +
"aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5," +
"h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,script,section,table,ul"));
// Inline Elements - HTML5
var inlineElements = angular.extend({}, optionalEndTagInlineElements, makeMap("a,abbr,acronym,b," +
"bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s," +
"samp,small,span,strike,strong,sub,sup,time,tt,u,var"));
If you really want it, one way you could do is to copy the angular-sanitize.js and modify the valid HTML tags configuration directly.
Please note that if you do it that way, all the ng-bind-html in your entire application will be also affected. If that is undesired, you have to write your own custom directive and inject/use your modified version of $sanitize instead.
If you're into modifying textAngular already, you could modify something around the taCustomRenderers Section of the code and use ta-bind instead of ng-bind-html. They do nearly the same thing except ta-bind runs all the extra renderers.
Custom Renderers Code: textAngularSetup, textAngular - probably in this one you can do your stripping out of unwanted code.
I'm using Backbone models as input into Mustache templates to generate HTML.
I have a Backbone model with a number of attributes, such as name, description and id. The description attribute can contain carriage returns, which I want to render as <br> tags when they're rendered in the template.
By default, Mustache simply outputs the carriage returns directly, so the markup looks tidy, but the rendered result has no breaks.
I don't particularly want to replace \n\r in the description attribute, as that property could be used elsewhere (e.g. in alt or meta tags).
The only idea I have so far is to add a duplicate description attribute that has the formatted text.
Is there nothing in Mustache that formats HTML line breaks as <br> tags?
Mustache is very limited on purpose. If you need anything special in a Mustache template, you prepare your data in JavaScript so that Mustache's interpolation and loops can handle it. In your case, that means splitting your string on EOLs to get an array:
// Adjust the regex to suit your data, this one is pretty loose.
var lines = string.split(/[\r\n]+/)
.map(function(line) { return { line: line } });
and then loop over that array in Mustache:
{{#lines}}
{{line}}<br>
{{/lines}}
mu is too short's answer is correct. I just want to add that the .map function isn't supported in IE8 (and older).
I ended up using a loop to achieve the same affect as we need to support IE8:
var descriptionArray = description.split(/[\r\n]+/);
var descriptionLines = new Array();
for (var line = 0; line < descriptionArray.length; line++) {
descriptionLines.push({ Line: descriptionArray[line] });
}