Having this HTML block in a React app:
<div className="my-class" title={myValue}>
<div>{myValue}</div>
</div>
The content of myValue is MyCompany™.
The inner div is showing the content correctly.
But the title, which appears when hover, replaces ™ with ™ and shows it like this: MyCompany™.
Why is this happening for the title? Is there a way to fix it?
You can use dangerouslySetInnerHTML, which is not ideal, but it is fine. So, the code should look like that:
let title = ["MyCompany", <span>™</span>]
<div className="my-class" dangerouslySetInnerHTML={{__html: title }}>
<div>{title }</div>
</div>
If your entity is dynamic, like you told me in the comments, then we can do the following trick:
const parseASCII = (string) => {
const htmlTextArea = document.createElement('textarea');
textarea.innerHTML = string;
return htmlTextArea.value;
}
Related
I'm trying to collect the text in a if href contains venue/, so I tried to do it this way:
var venue = $('.details > span > a:contains(href="venue/")');
sheet.getRange(3,17).setValue(venue.text().trim());
But returns with no value, how should I be able to retrieve such value?
As the site changes the positions of the elements from time to time, I need to define this contains.
Expected Result:
Estadio Manuel Ferreira (Asunción)
Map Example:
<div class="details ">
11/08/2021
<span class="divider"></span>
CONMEBOL Libertadores
<span class="divider"></span>
<span>KO</span>
<span>
19:15
</span>
<br>
<span>Venue</span>
<span>
Estadio Manuel Ferreira (Asunción)</span>
</div>
Link to site:
https://int.soccerway.com/matches/2021/08/12/south-america/copa-libertadores/club-olimpia/clube-de-regatas-de-flamengo/3579565/
It seems like the issue is right on the first line, as the “venue” variable does not return what you expect.
I propose you select the anchor you are looking for by getting the last element of type a in the div you provided and assign the value of its href attribute to a variable called venue. After that, check if the venue variable is equal to venue/. If the condition returns true, get the anchor’s inner text, assign it to a variable called result and log it.
You can make it work by using the following code:
let element = $('.details a').last()
let venue = element.attr('href');
if (venue === 'venue/') {
let result = element.text()
console.log(result) // this is the value you are looking for
}
Updated:
let elements = $('.details a')
elements.each((index, value) => {
let href = $(value).attr('href')
if (href === 'venue/') {
console.log($(value).text())
}
})
I am new to jquery and was wondering how I can point one html element equal to another. I want to make it so that whenever something in the h2 tag changes, the text within the p tags will copy the change. Below is how my tags are set up within the class fc-center.
var title = $('div.fc-center h2').text();
$('.fc-center').append('<p>'+'' +'</p>');
with the html looking something like
<div class = 'fc-center'>
<h2> text text</h2>
<p> </p>
</div>
essentially what I want to do is something like this :
$('div.fc-center p').equalto $('div.fc-center h2')
But I am not quite sure how to go about it
I propose this solution:
var title = $('.fc-center').find('h2').text();
var elementsP=$('.fc-center').find('p');
if (elementsP.length > 0) {
$.each(elementsP, function(i, val) {
$(this).empty().html(title);
});
}
https://jsfiddle.net/julian9319/grc0y6qf/1/
I am trying to use accordian in angular which can show a shor description of the content. And when you click on it, it should show the full description. So basically i need to slice the content and show it in the header. But i am unable to do so. Below is my code, as you can see I have announcement.title in teh heading. However i need to add part of announcement.content in the heading. So i need to slice the content for upto a few characters and show it in the heading. Then when someone click on it, i show the full content. I am not sure how to achieve this. Can someone help ?
HTML code :
<accordion>
<div *ngFor="let announcement of announcements; let i = index">
<accordion-group [heading]="announcement.title">
<div class="announcement-body" [innerHTML]="announcement.content"> {{ announcement?.content }}
</div>
</accordion-group>
</div>
</accordion>
TS file:
announcements: any[] = [];
ngOnInit() {
this.showAnnouncements();
}
showAnnouncements() {
this.configService.getAnnouncements().then(
(data: any) => {
for (const key in data) {
this.announcements.push({
title: data[key].title,
content: data[key].content
});
}
}
).catch((error) => {
console.log(error);
});
}
enter image description here
I also need the title and the sliced content to appear in the heading on different lines with different font.
You can append some portion of your content to the title using the string slice method. For example:
this.announcements.push({
title: data[key].title + data[key].content.slice(0,10),
content: data[key].content
});
This would add the first 10 characters of your content string to your title.
If you wanted some fixed length, you could do something like:
title: data[key].title + data[key].content.slice(0,MaxLength - data[key].title.length)
For the last case, you'd have to ensure that your title is always below max length or protect the slice from going negative.
What I want to do is to insert a component inside a div, after a specific div with a specific class name. How do I do this in typescript?
<div class ="{{order.orderId}}">
<div class="enter-here"></div>
<other html elements here>
</div>
And TypeScript:
insertDiv(){
insert.component.after.className.enter-here;
}
Inserting new element is not the angular way of doing it, when using angular DOM manipulation should be avoided as much as possible. In your question you haven't mentioned what will be the contents of .enter-here, so I am assuming it is just plain text:
In your html:
<div class ="{{order.orderId}}">
<div *ngIf="showEnterHereDiv" class="enter-here">
some text or list which should be visible after showDiv is called
</div>
<other html elements here>
</div>
In your typescript:
// hidden by default
showEnterHereDiv: boolean = false;
...
showDiv() {
// call this method to show the div
this.showEnterHereDiv = true;
}
hideDiv() {
this.showEnterHereDiv = false;
}
I have the following code in one of my Play .scala.html templates:
#formats.map(format => {
<div id="#format">
{format}
</div>
})
formats is a Seq of enumerations. The divs are created, with the proper "format" content (each contains a different format string), however, the ids are never set correctly. The id of each div is literally set to "#format", like this:
<div id="#format">
OneOfTheFormats
</div>
<div id="#format">
AnotherFormat
</div>
I've tried making the code <div id="{format}">, <div id={format}>, and <div id=#format> with no luck. It's odd, because I have done similar things in my other templates, but perhaps it's not working because of the special map case... maybe because format is a created argument, and not passed into the template?
UPDATE:
I tried the following, as someone below suggested:
#{
def createDiv(f: String) = {
<div id="#f">
{f}
</div>
}
formats.map(f => {
createDiv(f.toString)
})
}
Again, The formats are printed correctly inside the div, but the ID is never set. I'm beginning to think this isn't possible. I've also tried <div id="#f">, <div id="{f}">, and <div id="#{f}"> with no luck. Oddly enough, in order to print the format inside the div, I have to use {f}, and not #f. Still struggling here...
UPDATE 2:
It works if I do the following: <div id={f}> ... no quotes! God damn.
As I know, there are some limitations for declaring new variables in new templates, but you can use such a workaround:
#createDiv(format: String) = {
<div id="#format">
#format
</div>
}
And use it in your code like this:
#formats.map(format => {
createDiv(format.toString)
})
This worked for me. Hope this solution suits you.
it seems that there is name collision then you use "format" as a variable name probably because of String.format, try with different name
#formats.map{f =>
<div id="#f">
#f
</div>
}
The following worked for me:
#{
def createDiv(format: String) = {
<div id={format}>
{format}
</div>
}
formats.map(format => {
createDiv(format.toString)
})
}
Note the enclosed #{ } block, and that there are no quotes around the id part of <div id={format}>.
UPDATE:
I ended up doing something a bit cleaner - I used a separate template file. The code looks a bit like this now:
#formats.map(f => {
// do some other stuff
// render format subview
formatSubView(f, otherStuff)
})
And the sub-view template looks like the following:
#(f: theFormatEnum,
otherStuff: lotsOfOtherStuff)
<div id="#f">
<img src="#{routes.Assets.at("images/" + f + ".png")}"/>
// etc, etc
</div>