I want to display data from database (using PHPMYADMIN). The data which I want to display stored using ng2-ckeditor (Angular 6). So when it gives result it also shows the html tags, which I don't want. How do I get my result without displaying HTML tags?
This is for displaying in html page
(and newsArray is type Object)
which is displaying data but with html tags
<div *ngFor="let item of newsArray">
<div class="panel-body">
{{item.details}}
</div>
</div>
result given by this is:
<p>hello</p>
but expected result:
hello
you can use [innerHtml] property on the div
<div *ngFor="let item of newsArray">
<div class="panel-body" [innerHtml]='item.details'>
</div>
</div>
You can replace your result like this:
getText() {
return this.data.replace(/<[^>]*>/g, '');
}
This will replace all your html tags and keep only the blank text.
See my stackblitz demo
Related
I'm trying to parse a HTML from my firm by using Xpath, and here are the sample html structure of my target website:
<div class='my_target' id='A'>
This is a sample website HTML!
<span>APPLE</span>
<span>BANANA</span>
<span>ORANGE</span>
<span>IGNORE_1</span>
<span>IGNORE_2</span>
</div>
<div class='not_my_target' id='B'>
This is a sample website HTML!
<span>APPLE</span>
<span>BANANA</span>
<span>ORANGE</span>
<span>IGNORE_1</span>
<span>IGNORE_2</span>
</div>
And here are the elements I want to get:
<div class='my_target' id='A'>
This is a sample website HTML!
<span>APPLE</span>
<span>BANANA</span>
<span>ORANGE</span>
</div>
I've tried the code like:
//div[#id='A' and (not(self::span and contains(text(), "IGNORE_1")) or not(self::span and contains(text(), "IGNORE_2"))]
But it didn't work Q_Q
Did I write a wrong syntax ? Any one could help ?
Thanks　
Try this:
//div[#id='A']/span[not(contains(text(),'IGNORE_1')) and not(contains(text(),'IGNORE_2'))]
This will search for the ID value of A and then check span for not containing IGNORE_1 and IGNORE_2.
Problem with your case:
You are searching for ID and setting conditions that it shouldn't contain span, IGNORE_1 and IGNORE_2. That's why you are unable to get the desired result.
//div[#id='A' and (not(self::span and contains(text(), "IGNORE_1")) or not(self::span and contains(text(), "IGNORE_2"))]
I am working on an angular2+ project and often use the [innerHTML] tag to dynamically insert content into my templates. My problem is I have links that I need to open up in a new tab, however, I can't figure out how to change the target to "_blank".
<div class="container">
<div *ngFor="let taoys of taoysArray">
<h3 *ngIf="taoys?.title" [innerHTML]="taoys.title | safeHtml"></h3>
<p *ngIf="taoys?.text" [innerHTML]="taoys.text | safeHtml"></p>
</div>
</div>
</div>
The p tag is where the link shows up.
maybe you can set a placeholder that you replace with what you actually want, conditionally. Like this:
'<a href target="{target}">link</a>'.replace('{target}', '_blank')
I got a html like this:
<section id="SECTION_A">
<h4>List</h4>
<a style="text-decoration: none;" href="#list" data-toggle="collapse">
<div class="ITEM">
TEXT
</div>
</a>
<div id="IDENTIFICATION" class="collapse">
</div>
<a style="text-decoration: none;" href="#list" data-toggle="collapse">
<div class="ITEM2">
TEXT2
</div>
</a>
<div id="IDENTIFICATION2" class="collapse">
<div><b>TITLE</b>: CONTENT</div>
<div><b>TITLE2</b>: CONTENT2</div>
</div>
</section>
I've got stored it in a selector XPATH like this, because the html got several sections with similar structure, tags and repeated data:
sectionA = response.xpath('//section[#id="SECTION_A"]')
Now, I want to extract the ITEMS and their IDENTIFICATIONS and write them into a file.
Extracting the ITEM gave no problem with:
item = sectionA.xpath('.//div/#class[contains(.,"ITEM")]').extract()
And it returns:
[u'ITEM', u'ITEM2']
But I cannot extract the TEXT of the ITEMS, I've tried:
item = sectionA.xpath('.//div/#class[contains(.,"ITEM")]/text()').extract()
But returns an empty list.
I'm also unable to extract the IDENTIFICATIONS, one problem with these is that they may not have any content or several, so I've tried to extract a selector of them from the SECTIONA selector like this:
identifications = sectionA.xpath('.//div/#id[contains(.,"IDENTIFICATION")]')
It retunrs me a selector similar to sectionA, but when I try to search in it i got nothing with this:
for id in identifications:
title= signature.xpath('.//div')
I've tried sevelal combinations like .//div/b or .//b or just .// but i got nothing.
Anyone know how I can get the ITEM-TEXT and IDENTIFICATIONS-CONTENT from an html like this?
The problem you are facing is not in the steps applied but is a Logical mistake. The reason why you are not getting the Text inside the 'ITEM' class is due to an extra / that you are using.
In the code that you wrote :
item = sectionA.xpath('.//div/#class[contains(.,"ITEM")]').extract()
Here it returns [u'ITEM', u'ITEM2'] due to the use of / before #class in //div/#class , which basically here means : return me the value used in the class which contains "ITEM" substring in it. And since the attribute #class is being pointed to here, it returns [] for there is no text to be pointed to.
What you instead want to do is :
item = sectionA.xpath('.//div[contains(#class,"ITEM")]/text()').extract()
Here the output of sectionA.xpath('.//div[contains(#class,"ITEM")]') is the selector:
[<Selector xpath='.//div[contains(#class,"ITEM")]' data=u'<div class="ITEM">'>, <Selector xpath='.//div[contains(#class,"ITEM")]' data=u'<div class="ITEM2">'>]
Similar mistake is made in the extraction for "IDENTIFICATIONS", with one more grave Logical Problem. The usage of // in title = signature.xpath('.//div') is not the appropriate method since it will not show the div in just the div IDENTIFICATIONS, but will instead try with all divs preset in the HTML. Again, this may not be a problem unless there was a div with substring "IDENTIFICATION" outside the div we are searching in. So a better way to do it, instead is to do something similar follows as per requirement :
>>> identification=sectionA.xpath('.//div[contains(#id,"IDENTIFICATION")]')
>>> for id in identification:
... print(id.xpath('div/b')).extract()
I am building a page preloader with ReactJS. The Codepen snippet I am using is written in HTML and I need help converting it into HTML ready for React.
Part of the snippet
<div class="socket">
<div class="gel center-gel">
<div class="hex-brick h1"></div>
<div class="hex-brick h2"></div>
<div class="hex-brick h3"></div>
</div>
</div>
Conversion to React
<div className={s.socket}>
<div className={s.gel s.center-gel}>
<div className={s.hex_brick s.h1}></div>
<div className={s.hex_brick s.h2}></div>
<div className={s.hex_brick s.h3}></div>
</div>
</div>
So I have replaced hyphens with underscores, used curly brackets instead of quotes, and added Name to the class. However, I don't know how to add the second div modifier (for example in div gel there is element center-gel). When a second element is added to a React div, it fails to compile.
React does not allow these second div elements. After testing, my loading animation does not look correct if I separate out the elements, the structure needs to stay the same.
Snippet Used
When you write JSX code in React you are actually writing JavaScript code. Let's say you put those expression into a variable like so:
var styles = s.gel s.center-gel;
It just doesn't make any sense in JS. You need to write a valid expression like this:
var styles = [s.gel, s['center-gel']].join(' ');
Keeping that in mind, your code should work this way:
<div className={s.socket}>
<div className={[s.gel, s['center-gel']].join(' ')}>
<div className={[s.hex_brick, s.h1].join(' ')}></div>
<div className={[s.hex_brick, s.h2].join(' ')}></div>
<div className={[s.hex_brick, s.h3].join(' ')}></div>
</div>
</div>
I use an editor to add comment and this content save as html in db. When I want to display it in page all html elements appear in out put. So I want to use this code to solve my problem but not solve it.
Here is my code
Data include {body, name, date} that body save as html
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html-unsafe="d.body">
<p>{{d.body}}</p>
</div>
</div>
</div>
In jsfiddle inside an question is using angular 1.1 in which ng-bind-html-unsafe is working.
But currently angular has deprecated ng-bind-html-unsafe from latest version, instead you need to use ng-bind-html then sanitize that url from the angular filter using $sce service and $sce.trustedAsHtml()
Filter
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
HTML
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html="d.body | sanitize">
<p>{{d.body}}</p>
</div>
</div>
</div>
For more info refer this SO answer