i have multi-language next js website.
i use packge i18next. i define variable in jsx like this.
{t("satisfied:title")}
it means
{t("JSONflieName:JSONvariable")}
but in json file i can't use HTML and it shows me like string
"title" : "this is my<br \/> <span class=\"test\"> test <\/span> title"
HTML entities are escaped for security reasons by React. In order to make your translations render actual HTML you could do something like this:
<div dangerouslySetInnerHTML={{ __html: t("satisfied:title")}} />
But, I would strongly advice you to not do it like above. The actual thing you should beware of is putting HTML into your translated texts. If these translations are managed at some point by external translators, they might not be familiar with the HTML syntax. Do you trust these translators to not destroy your UI accidentally? You should not.
Instead you should use the advanced concepts for handling cases like above using this technique: https://react.i18next.com/latest/trans-component
Related
I have a quick question. I am currently developing a React app with Python on the backend. On the Python side, I parse some html files, and I extract some html tags from them. Then it gets packed into a JSON and sent to the frontend. So React app receives something like this:
{'<b>id</b>': 'Link'}
So those are like raw html tags in form of strings. Now I want to render them. And this happens:
And this is how it looks under dev tools:
So it gets rendered as literal string and what I want is the text on the left side to be bold, and the text on the other side to be an actual hyperlink. Is there a way to do it?
React stops this intentionally. See the docs.
In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.
You can still accomplish it by using dangerouslySetInnerHTML. Replace the following test div with your variable holding html.
const test = "<div>TEST</div>";
return <div dangerouslySetInnerHTML={{__html: test }} />;
I'm working on software creating annotations and would like my main data structure to be based around markdown.
I was thinking of working with an existing markdown editor, but hacking it so that certain tags, i.e. [annotation-id-001]Sample text.[/annotation-id-001] did not show up as rendered HTML; the above would output Sample text. in an HTML preview and link to a separate annotation with the ID 001.
My question is, is this the most efficient way to represent this kind of metadata inside of a markdown document? Also, if a user wants to legitimately use something like "[annotation-id-001]" as text inside of their document, I assume that I would have to make that string syntax illegal, correct?
I don't know what Markdown parser you use but you can abord your problem with different points of view:
first you can "hack" an existing parser to exclude your annotation tags from "classic" parsing and include them only in a certain mode
you can also use the internal "meta-data" information proposed by certain parsers (like MultiMarkdown or MarkdownExtended) and only write your annotations like meta-data with a reference to their final place in content
or, as mentionned by mb21, you can use simple links notation like [Sample text.](#annotation-id-001) or use footnotes like [Sample text.](^annotation-id-001) and put your annotations as footnotes.
Classic problem. Want to see html rendered but I'm seeing text in the browser. Whether I tell handlebars js to decode it or not in template ( three curly braces vs two - {{{myHtmlData}}} vs {{myHtmlData}} ) doesn't get me there. Something about the JSON being returned via the model.fetch() has this html data wrapped up in such a way that it is resistant to the notion of displaying as HTML. It's always considered a string whether encoded or decoded so it always displays as text.
Is this just something backbone isn't meant to do?
The technologies involved here are:
backbone.marionette
handlebars.js
.NET Web API
Your data is being escaped automatically. It's a good thing, but since you're sure the data is a safe HTML. Use {{{}}} as in this other question Insert html in a handlebar template without escaping .
Facebook like button (XFBML) used this
<fb:like send="true" width="450" show_faces="true"></fb:like>
Clearly the <fb></fb> is a tag, XML will accept it but it's not HTML. So is it normal that the browser keep it in the document?
What kind of programming technique is this called? Is it the right way? Or just another way to create a hidden element and replace the id="fb" ?
What is the :something in <fb:like> stands for? How to access it with javascript?
This is XHP!
XHP is a PHP extension created by Facebook.
It makes PHP understand XML nodes, so you can write something like this (from their own example):
<?php
$href = 'http://www.facebook.com';
echo <a href={$href}>Facebook</a>;
?>
XHP also allows you to create PHP classes, which can be used in your markup. So the <fb:like /> node is actually turned into a PHP class at compile time. The definition of the class probably looks like this:
<?php
class :fb:like extends :x:element {
...
}
You can read more about it in the link to Github above, and on the creators blog which is all about XHP.
So to answer your questions:
will not be processed by the browser, but by XHP. XHP turns it into PHP objects, which lastly turns it into valid HTML tag(s). This is true when using XHP, but it is also possible for us to use the same tag, without XHP. I'm guessing this is just a matter of parsing the tag in javascript and sending the variable to the API, which probably uses API to recreate the structure, and send back the HTML.
Not really a technique, but a unique thing that Facebook has developed to make their lifes working with PHP easier.
Again, when it is returned to the browser, it has been transformed by XHP (after sending it to Facebook through javascript). Try looking at the rendered version - it looks different than the simple <fb:like> tag.
I stumbled upon this code:
<a href="#" class="text1"{text2}>...</a>
What does the {text2} do? Later on, this HTML is replaced with:
<a href="#" class="text1" {text2} style>...</a>
Is there a way I can retrieve the text2 value with jQuery?
In some cases that code is input in, so scripts can actually easily identify a the line. Or in some cases can be an indicator for a database to retrieve and store data once it has been pulled.
Or it could be invalid markup, doubtful if the person knows what they are doing.
But without any other information or variables it is hard to say. But the most common is access for scripts within Php, Javascript, and even C#. Cause they can parse the HTML document and manipulate it. If those braces are used, and it is incorrectly it will cause a parse error.
Hopefully that sort of clarifies it.
Update:
Yes, jQuery can find it. It is a form of Javascript. You could implement something such as:
$(function() {
var foundString = $('*:contains("{text1}")');
});
There is a vast amount of data that addresses this for more detail.
It does nothing in HTML. It's actually invalid markup. Looks like maybe you have a template system that finds and replaces that before it gets rendered to the browser.
I know that in jinja2, a python templating system, brackets contain commands to the template engine, either as:
Hello, {{varName}}
or:
<ol>
{%for l in varList%}
<li>{{l}}</li>
{%endfor%}
</ol>
That's in jinja, but jinja has similar syntax to django templates, and many other template engines probably copy django's syntax also.
its used in angular js and are called expressions {{expression}}
AngularJS is a JavaScript framework. It can be added to an HTML page with a tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.