Angular *ngFor problems on showing result - html

i'm trying to show tags from user, (example when user write #name).
my code in html is this.
<div *ngIf="tagsArr" style="display: flex;">
<p>
<span>Tags: </span>
</p>
<p *ngFor="let tag of tagsArr">
<span> {{tag}}, </span>
</p>
</div>
This is the code. and the result is like:
Tags: #name ,#name ,#name < / p >,
(without space)
Why the end tag of </p>, is displayed there?
I want to display the Tags like:
Tags: #name, #name, #name


it shouldn't show <p> may be you have a <p> string in tagsArr
it work fine on my device
.ts
tagsArr = ['#tag1, #tag2, #tag3' ,'#tag4' ]
.html
<div *ngIf="tagsArr">
<p>
<span>Tags: </span>
</p>
<p *ngFor="let tag of tagsArr">
<span> {{tag}}, </span>
</p>
</div>

Related

Encode .ico in HTML Application (.hta) File

UPDATE: I changed the image displaying on my page to an encoded version, instead of referencing the external image. I was able to put my image into a Base64 converter, and then copy and paste the string version of the image into the file (represented by ~~~ in my code below). This worked fine. Is there a similar method for encoding the icon?
Problem: I have a HTML Application file (.hta) that I've created. To make the user experience more customized I would like to change the icon for the taskbar (and maybe the actual file when looking at it in the file explorer or on SharePoint). The reason I want to encode the image instead of using a file is because when I try to use a network file, it takes a 'long' time to open the .hta file and I know this will annoy my end users. It is a basic site with links to open template files that we use frequently, the purpose is to open a copy of the most recent template so we make sure everyone is using the most current templates and knows where all of the tools we use are located. I've researched this quite a bit and I can't seem to find a solution that works for me.
What I've Tried:
I've tried the "trick" where I use the Command Prompt to copy the .ico file to the .hta file. This does change the icon but displays a bunch of nonsensical text at the top of my page above all of my content. If someone has a solution for removing this, that works. Unless this is not a stable solution...
I've also tried converting my image to Base64 and using that when declaring the ICON in < HTA:APPLICATION ... />, similar to encoding for < img >, but it didn't work for me. When I tried, nothing happened.
Additional Comments: I'm OK with any solution really, as long as the image is encoded and it is stable.
Basic Structure of Working File (UPDATED):
<!DOCTYPE html>
<html>
<HTA:APPLICATION ID = "oMyApp" APPLICATIONNAME = "MyApp" ICON = "path" BORDER = "thick" CAPTION = "yes" SHOWINTASKBAR = "yes" SINGLEINSTANCE = "yes" SYSMENU = "yes" WINDOWSTATE = "maximize" />
<head>
<title> My App </title>
<link rel = "icon" href = "path">
<link rel = "sytlesheet" type = "text/css" href = "StyleSheet.css">
</head>
<body> <div class = "content">
<div class = "Title">
<img src = "data:image/png;base64,~~~" alt = "icon" />
<strong> My App </strong>
</div>
<div class = "main">
<div class = "column">
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<br><br>
</div>
<div class = "column">
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<br><br>
</div>
<div class = "column">
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<br><br>
</div>
<div class = "column">
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<div class = "box">
File Name <br>
<strong> Instructions </strong> <br>
<em> Description of File </em>
</div>
<br><br>
</div>
</div>
<div class = "Footer">
<em> Comment to Users </em>
</div>
</div> </body>
</html>
Please Help

Display HTML code in text box

I am having a text box which I am filling from the Json response as below
<div class="gadget-body" style="height:100px">
<label>{{ textData}}</label>
</div>
But now my Json is returning html code with <p> and <h1> tags. I am binding the response, but it is displaying with <p> and <h1> tags instead of applying it.

The simple and easiest way is use innerhtml tag
<div class="gadget-body" >
<div [innerHTML]="textData">
</div>
</div>

Maybe have a function like this :
function htmlToPlaintext(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
}
and then you'd use:
<div class="gadget-body" style="height:100px">
<label>{{ htmlToPlaintext(textData) }}</label>
</div>

How to split string containing comma using span tag

There is a string containing tags separated by comma:
<div class="article" id="1">
<span class="tags">Dog, Cat, Bird, Pig</span>
</div>
<div class="article" id="2">
<span class="tags">Asia, Africa, Australia, Europe</span>
</div>
...
I would like to wrap each item using span tag within the tags class so that each of them can be individually styled like this
<span class="tags"><span>Dog</span><span>Cat</span>...</span>

$('.tags').html($('.tags').html().split(', ').map(function(el) {return '<span>' + el + '</span>'}))
Fiddle here

goquery- Extract text from one html tag and add it to the next tag

Yeah, sorry that the title explains nothing. I'll need to use an example.
This is a continuation of another question I posted which solved one problem but not all of them. I've put most of the background info from that question into this one. Also, I've only been looking into Go for about 5 days (and I only started learning code a couple months ago), so I'm 90% sure that I'm close to figuring out what I want and that the problem is that I've got some silly syntax mistakes.
Situation
I'm trying to use goquery to parse a webpage. (Eventually I want to put some of the data in a database). Here's what it looks like:
<html>
<body>
<h1>
<span class="text">Go </span>
</h1>
<p>
<span class="text">totally </span>
<span class="post">kicks </span>
</p>
<p>
<span class="text">hacks </span>
<span class="post">its </span>
</p>
<h1>
<span class="text">debugger </span>
</h1>
<p>
<span class="text">should </span>
<span class="post">be </span>
</p>
<p>
<span class="text">called </span>
<span class="post">ogle </span>
</p>
<h3>
<span class="statement">true</span>
</h3>
</body>
<html>
Objective
I'd like to:
Extract the content of <h1..."text".
Insert (and concatenate) this extracted content into the content of <p..."text".
Only do this for the <p> tag that immediately follows the <h1> tag.
Do this for all of the <h1> tags on the page.
Once again, an example explains ^this better. This is what I want it to look like:
<html>
<body>
<p>
<span class="text">Go totally </span>
<span class="post">kicks </span>
</p>
<p>
<span class="text">hacks </span>
<span class="post">its </span>
</p>
<p>
<span class="text">debugger should </span>
<span class="post">be </span>
</p>
<p>
<span class="text">called </span>
<span class="post">ogle</span>
</p>
<h3>
<span class="statement">true</span>
</h3>
</body>
<html>
Solution Attempts
Because distinguishing further the <h1> tags from the <p> tags would provide more parsing options, I've figured out how to change the class attributes of the <h1> tags to this:
<html>
<body>
<h1>
<span class="title">Go </span>
</h1>
<p>
<span class="text">totally </span>
<span class="post">kicks </span>
</p>
<p>
<span class="text">hacks </span>
<span class="post">its </span>
</p>
<h1>
<span class="title">debugger </span>
</h1>
<p>
<span class="text">should </span>
<span class="post">be </span>
</p>
<p>
<span class="text">called </span>
<span class="post">ogle </span>
</p>
<h3>
<span class="statement">true</span>
</h3>
</body>
<html>
with this code:
html_code := strings.NewReader(`
code_example_above
`)
doc, _ := goquery.NewDocumentFromReader(html_code)
doc.Find("h1").Each(func(i int, s *goquery.Selection) {
s.SetAttr("class", "title")
class, _ := s.Attr("class")
if class == "title" {
fmt.Println(class, s.Text())
}
})
I know that I can select the <p..."text" following the <h1..."title" with either doc.Find("h1+p") or s.Next() inside the doc.Find("h1").Each function:
doc.Find("h1").Each(func(i int, s *goquery.Selection) {
s.SetAttr("class", "title")
class, _ := s.Attr("class")
if class == "title" {
fmt.Println(class, s.Text())
fmt.Println(s.Next().Text())
}
})
I can't figure out how to insert the text from <h1..."title" to <p..."text". I've tried using quite a few variations of s.After(), s.Before(), and s.Append(), e.g., like this:
doc.Find("h1").Each(func(i int, s *goquery.Selection) {
s.SetAttr("class", "title")
class, _ := s.Attr("class")
if class == "title" {
s.After(s.Text())
fmt.Println(s.Next().Text())
}
})
but I can't figure out how to do exactly what I want.
If I use s.After(s.Next().Text()) instead, I get this error output:
panic: expected identifier, found 5 instead
goroutine 1 [running]:
code.google.com/p/cascadia.MustCompile(0xc2082f09a0, 0x62, 0x62)
/home/*/go/src/code.google.com/p/cascadia/selector.go:59 +0x77
github.com/PuerkitoBio/goquery.(*Selection).After(0xc2082ea630, 0xc2082f09a0, 0x62, 0x5)
/home/*/go/src/github.com/PuerkitoBio/goquery/manipulation.go:18 +0x32
main.func·001(0x0, 0xc2082ea630)
/home/*/go/test2.go:78 +0x106
github.com/PuerkitoBio/goquery.(*Selection).Each(0xc2082ea600, 0x7cb678, 0x2)
/home/*/go/src/github.com/PuerkitoBio/goquery/iteration.go:7 +0x173
main.ExampleScrape()
/home/*/go/test2.go:82 +0x213
main.main()
/home/*/go/test2.go:175 +0x1b
goroutine 9 [runnable]:
net/http.(*persistConn).readLoop(0xc208047ef0)
/usr/lib/go/src/net/http/transport.go:928 +0x9ce
created by net/http.(*Transport).dialConn
/usr/lib/go/src/net/http/transport.go:660 +0xc9f
goroutine 17 [syscall, locked to thread]:
runtime.goexit()
/usr/lib/go/src/runtime/asm_amd64.s:2232 +0x1
goroutine 10 [select]:
net/http.(*persistConn).writeLoop(0xc208047ef0)
/usr/lib/go/src/net/http/transport.go:945 +0x41d
created by net/http.(*Transport).dialConn
/usr/lib/go/src/net/http/transport.go:661 +0xcbc
exit status 2
(The lines of my script don't match the lines of the examples above, but "line 72" of my script contains the code s.After(s.Next().Text()). I don't know what exactly panic: expected identifier, found 5 instead means.)
Summary
In summary, my problem is that I can't quite wrap my head around how to use goquery to add text to a tag.
I think I'm close. Would any gopher Jedis be able and willing to help this padawan?

Something like this code does the job, it finds all <h1> nodes, then all <span> nodes inside these <h1> nodes, looking for one with class text. Then it gets the next element to the <h1> node, if it is a <p>, that has inside a <span>, then it replaces this last <span> with a new <span> with the new text and removes the <h1>.
I wonder if it's possible to create nodes using goquery without writing html...
package main
import (
"fmt"
"strings"
"github.com/PuerkitoBio/goquery"
)
var htmlCode string = `<html>
...
<html>`
func main() {
doc, _ := goquery.NewDocumentFromReader(strings.NewReader((htmlCode)))
doc.Find("h1").Each(func(i int, h1 *goquery.Selection) {
h1.Find("span").Each(func(j int, s *goquery.Selection) {
if s.HasClass("text") {
if p := h1.Next(); p != nil {
if ps := p.Children().First(); ps != nil && ps.HasClass("text") {
ps.ReplaceWithHtml(
fmt.Sprintf("<span class=\"text\">%s%s</span>)", s.Text(), ps.Text()))
h1.Remove()
}
}
}
})
})
htmlResult, _ := doc.Html()
fmt.Println(htmlResult)
}

Set parent element of a group of nodes (wrap whole group)

Can Jsoup set parent element of a group of nodes? I mean wrap it, but no every matched element - only create one parent element? So I want to include more elements into one?
Example: before
<b>some text<i> blabla </i> other text </b>
After
<span id='something'><b>some text<i> blabla </i> other text </b></span>
<b>some te
<span id="cke_bm_69S" style="display: none;"> </span>
xt</b>
aaa
<i>bb
<span id="cke_bm_69S" style="display: none;"> </span>
b</i>
The span tags are bookmarks - start selection and end selection - added from CKEDITOR. Then on the server side I have to process it. This is the goal - add final span and remove the temp-spans (bookmarks):
<b>some te</b>
<span id="something"><b>
xt</b>
aaa
<i>bb
</i></span><i>
b</i>
As you can see, it has to solve the tag-crossing problem.

public static void main(String... args) throws IOException {
Document document = Jsoup.parse("<div>"
+ "<b>some text<i> blabla </i> other text </b>" + "</div>");
Element b = document.select("b").first();
Element span = document.createElement("span");
span.attr("id", "something");
b.replaceWith(span);
span.appendChild(b);
System.out.println(document);
}
Output
<html>
<head></head>
<body>
<div>
<span id="something"><b>some text<i> blabla </i> other text </b></span>
</div>
</body>
</html>