{
"string": "This is a bold string"
}
I want to get the bold text to display it into the UI, and the string is coming from JSON file. Also, this string will be translated into another languages.
Like: - i18next.t('string')
I tried using and also passing tried changing the text nature, while passing it into i18next.t.
I suggest you apply the translation after formatting.
Something like below.
export function App(props) {
const { t } = useTranslation();
let str = boldStringPart();
return (
//word bold is already wrapped around b tag, so translate
<div className='App'>
<p>{ t(str) }</p>
</div>
);
function boldStringPart() {
let myjson = { "string": "This is a bold string" };
//at this point it is english and we add b tag around word "bold"
let newString = myjson.string.replace('bold', '<b>bold</b>');
}
}
Trans component should be able to help you out https://react.i18next.com/latest/trans-component
Related
I'm using the monaco editor for validating JSON in accordance with a custom schema, such as is described in this Playground example.
Next, I'd like to customize a hover event whose behavior depends on which part of the schema is being hovered over. I can easily add a hover event that knows what word I'm hovering over, by just adding some code like this:
monaco.languages.registerHoverProvider('json', {
provideHover: function(model, position) {
// get the word that the cursor is currently hovering over
var word = model.getWordAtPosition(position);
var wordRange = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
return {
contents: [{ value: 'This word is: ' + word.word }],
range: wordRange
};
}
});
But what I also need to know is the schema path-- something like this, but with a properly functioning getSchemaPart():
function getSchemaPart(model, position) {
return ['http://myserver/bar-schema.json#', 'p1'].join('/'); // How do I do this properly?
}
monaco.languages.registerHoverProvider('json', {
provideHover: function(model, position) {
// get the word that the cursor is currently hovering over
var word = model.getWordAtPosition(position);
var wordRange = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
var schemaPart = getSchemaPart(model, position);
return {
contents: [{ value: 'This word is: ' + word.word + ' and its schema part is ' + schemaPart }],
range: wordRange
};
}
});
Clearly, Monaco already knows this information since it's needed for validation. Is there any way to fetch it in my hover event?
Alternatively, is there a clean way to use some other library and feed it the entire JSON value, and then figure out what schema part applies to the particular position that is being hovered over? This latter approach seems feasible in theory but challenging when considering that there may be whitespace in the input which the parser ignores, and therefore it requires mapping positions to tokens to schema parts.
I developed project using anguler with ngRx framework. I used TypeScript with HTML for developing front-end.My db have saved 'HTML' format texts like below.
"<html><body>A.txt
B.txt
D.txt
www.facebook.com
</body></html>"
This text priviouly , I drectly render in html file using <dev INNERHTML ={{stringText }} \> like wise.
But my project using JXBrowser and as it's configuration , this can't be directly open in default browser clicking just link.
For that work ,I need to take href location as URL and when click it passed to .ts file.
I thought ,it change as like this <a role="button" click='getLink(myText)'> {{getLink(value}} </a>'. so ,create this ,I need that text put a array with contain 'location' and value.Next ,I though ,Iterate that array in HTML file.
I need some expert help to do this ? I am struggle with map above text to such kind of string array (eg :array[hrfeLink][value]). Hope some expert help me.
------------Updated---------------
According to the comment, I will try this way, and I can take the link location. But still couldn't take value.
let parser = new DOMParser();
let doc = parser.parseFromString(info, "text/html");
let x = doc.getElementsByTagName('a');
for (let i = 0; i < x.length ; i++) {
console.log(x[i].getAttribute('href'));
}
What is the value that you want? Is it the anchor text of the link?
We create an interface Link with the properties that we want from each link
interface Link {
location: string;
value: string;
}
Then we create a function that extracts all links from an html string and converts them to an array of Link objects.
function parseLinks( stringHTML: string ): Link[] {
// create a parser object
const parser = new DOMParser();
// turn the string into a Document
const doc = parser.parseFromString( stringHTML, "text/html" );
// get all links
const linkNodes = doc.getElementsByTagName('a');
// convert from HTMLCollection to array to use .map()
const linksArray = [...linkNodes];
// map from HTMLAnchorElement to Link object
return linksArray.map( element => ({
location: element.href,
value: element.innerText,
}))
}
Now you can do whatever with the links from your text
const text = `<html><body>A.txt
B.txt
D.txt
www.facebook.com
</body></html>`;
const links: Link[] = parseLinks( text );
// can use like this
links.map( ({location, value}) => {
// do something here
})
Typescript Playground Link
In an MVC application I have to use #HTML.TextAreaFor to display some text from a database, the trouble is sometimes that text may have HTML tags within it and I can't see a way to remove those for display only.
Is it possible to do this in the view (maybe with CSS?) without having to strip the tags in the controller first?
EDIT
The data coming from the controller contains html tags which I do not want to remove, I just don't want to display them
Normally I would use #HTML.Raw but it has to work in a #HTML.TextAreaFor control.
If you want to decode Html returned from the Controller you can use the following JavaScript method:
This method decodes "Chris' corner" to "Chris' corner".
var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
function decodeHTMLEntities(str) {
if (str && typeof str === 'string') {
// strip script/html tags
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeHTMLEntities;
})();
You can do this by using a razor code in your view.
#Html.Raw(HttpUtility.HtmlDecode(Model.Content))
if I set Model.Content to this string "<strong>This is me</strong><button>click</button>", the code above will render it like HTML code and will have a strong text next to a button as an output like the image below:
There's some nice rich text editors libraries like CK Editor, Quill, or TinyMCE that can display HTML while still maintaining the editor capabilities of being a text editor. All of these libraries have capabilities of being read-only as well if that's necessary.
Example from Quill -
Sorted this by changing TextAreaFor toTextBoxFor and setting a formatted value.
#Html.TextBoxFor(x => Model.MyItem, new { #class = "form-control", #required = "true", Value = Regex.Replace(Model.MyItem, "<.*?>", String.Empty) })
I'm writing a simple WYSIWYG editor in Angular 5 to handle tags in the text. Those tags are like variables. For instance when doing: Hi (!--username--), welcome! it's rendered as Hi alex, welcome!. In order to be user-friendly for the non-technical, the WYSIWYG is transforming (!--username--) to a pretty HTML fragment showing directly "Alexandre" in its content.
This editor needs to handle simple HTML tags too (<b>, <i>, ...)
To do that, I've developed a component named editor which is using Angular's value accessors and showing a simple div like that:
<div class="editor" #editor [innerHTML]="content | prettytags: completions" (focus)="toogleToolbar()" (focusout)="toogleToolbar()"
(click)="onClick($event)" (keyup)="onKey($event)" [attr.contenteditable]="!readonly"></div>
The pipe looks like (for information, completions is the variable containing all tags values):
const pattern: RegExp = /(\(!--[^\s-]*--\))/;
#Pipe({
name: 'prettytags'
})
export class PrettyTagsPipe {
constructor(private sanitizer: DomSanitizer) {}
transform(value: string, completions: any[]): SafeHtml {
if (isNil(value)) return '';
const text = this.makeText(value, completions, 0);
return this.sanitizer.bypassSecurityTrustHtml(text);
}
private makeText(value: string, completions: any[], index: number): any {
const text = value
.split(pattern)
.map(word => {
const tag = completions.find(t => t.tag === word);
return isNil(tag)
? word
: this.getTagHtml(tag.value)
})
.join('');
return text;
}
private getTagHtml(text: any) {
return `<span class="chip" spellcheck="false">${text}</span> `;
}
}
In order to get the two-way data binding working as I'm using [innerHTML], I'm using the keyup event to get new characters but I need to get the caret position to append new characters. To do that I've copy/pasted a function found on Stack Overflow to get the caret position:
private getCaretPosition() {
const element = document.querySelector('.editor');
const range = window.getSelection().getRangeAt(0);
const preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
return preCaretRange.toString().length;
}
And on my onKeyUp: I do the following:
[...]
const position = this.getCaretPosition();
this.content += key.length === 1 ? this.content.slice(0, position) + key + this.content.slice(position) : '';
but it's not working as it gets the text position.
For instance, if the user wants to edit the content: from Hi (!--username--), welcome! to Hi (!--username--), I'm fine to see you back!, he will place his caret just after the comma, so I'll get 8 (for "Hi alex,") but with my content variable I'll get Hi (!--u.
I know I can get the position of the cursor with HTML tags, but I'll need to do many computations for each key pressed.
Do you have any idea to get this thing to work?
I would like to know whether is it possible to insert an input tag in Json file? I would like to add a checkbox in here
{
"data1":"here"
}
{"row"[{
"DATA1" ："<input type='checkbox'/>"
},
{
"DATA2" ："<input type='text'/>"
}
]}
Like this?
No. The closest you could get would probably be to represent a checkbox as a string.
{
"data1":"<input type=\"checkbox\"/>"
}
Then you would be able to insert that string as html into the DOM somewhere (assuming this is for an HTML webpage)
document.getElementById("someid").innerHTML = myJSONObject.data1;
Depending on what you are trying to do you might be able to use a function that returns a checkbox.
{
"data1":function(){
var box = document.createElement("input");
box.setAttribute("type", "checkbox");
return box;
}
}
Then in your code that parses the JSON you would need to call the data1 property as a function
var myCheckboxFromJSONFile = myJSONObject.data1();
I had found the solution.
Hopefully it can help any newbies outside
{
"data1":"<input type='checkbox'>"
}
Don't use double quotes(") use single quotes(')