I'm scraping an HTML page but I'm trying to get one section of the page. There are no classes, id's or anything super useful I can plug into Cheerio I feel like (I'm new to this, so I know my ignorance plays a part).
The code looks like this.
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
<hr style="width:90%; padding: 0>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<hr style="width:90%; padding: 0>
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
Is there a way to grab the HTML between the two <hr> elements with Cheerio? Both elements are exactly the same.
You can start at the first hr and iterate next() until you get to the second one:
let el = $('hr').first()
while(el = el.next()){
if(el.length === 0 || el.prop('tagName') === 'HR') break
text += el.text() + "\n"
}
If you can ascertain which nth to use you could try nth-of-type selector e.g.
hr:nth-of-type(1)
You might also be able to use nth-child
Related
I am new to ReactJS and trying a simple portal page and stuck in a point. How to write a superscript in a navigation bar file.
I am reusing the existing project and need a way to write superscript to the text.
export const navHeader = { text: "Test Page", href: "/" };
How to get the result like Test Page ^ abc ( abc should be in power).
You can just use the sup HTML Element, or wrap the text in another element and use the vertical-align: super rule
Using Native HTML Element
<span>
Test Page
<sup>abc</sup>
</span>
Using CSS
<span>
Test Page
<span style={{ verticalAlign: "super" }}>abc</sup>
</span>
Is it possible to apply styles like bold / italic or both together in angular 6 by just having starting and ending point of the text while creating or after creating the components dynamically ? Right now I'm able to apply styles for the whole component but i wanted to apply style only for a particular text in the element and the length of the text will be from JSON.
Please find stackblitz implementation here.
Actual result should apply the style to text based on the offset and length
Yes, you should be able to achieve this with a conditional ngStyle statement, based on the length of the text string, or other criteria. E.g. apply bold and italic styling if your text string is longer than 20 characters:
<div [ngStyle]="textString.length > 20 && {'font-weight': 'bold', 'font-style': 'italic'}">{{textString}}</div>
Further information here and here is an example on Stackblitz.
Alternatively you can apply ngClass conditionally in the same way, and have your custom styling in your CSS file.
Method 1 - Slice Pipe
If you want to add styling based on character positions within some text, rather than the overall length of some text, and you want to do this purely in your HTML template, you could achieve this with the slice pipe.
I've put an example of how this could be applied below and on Stackblitz. The HTML markup is horrible, and line breaks must not be used in the code because these introduce unwanted spaces into the rendered text, but I believe it covers what you're asking for:
For a single highlight:
TS:
singleString = 'London Kings Cross Station';
highlightStart = 3;
highlightLength = 5;
HTML:
<ng-container>{{singleString | slice:0:highlightStart}}</ng-container>
<span class="styled_text">{{singleString | slice:highlightStart:highlightStart+highlightLength}}</span>
<ng-container>{{singleString | slice:highlightStart+highlightLength:singleString.length}}</ng-container>
For multiple highlights:
TS:
textStrings = ['London Kings Cross', 'Bristol Temple Meads'];
stylePositions = [[3,3],[15,3]]; // Start position and length of sections to be styled
HTML:
<ul>
<li *ngFor="let textString of textStrings">
<ng-container *ngFor="let stylePosition of stylePositions; index as i">
<ng-container *ngIf="i==0">{{textString | slice:0:stylePositions[0][0]}}</ng-container><ng-container *ngIf="i!=0">{{textString | slice:stylePositions[i-1][0]+stylePositions[i-1][1]:stylePositions[i][0]}}</ng-container><span class="styled_text">{{textString | slice:stylePositions[i][0]:stylePositions[i][0]+stylePositions[i][1]}}</span><ng-container *ngIf="i==stylePositions.length-1">{{textString | slice:stylePositions[i][0]+stylePositions[i][1]:textString.length}}</ng-container>
</ng-container>
</li>
</ul>
CSS:
.styled_text {
font-weight: bold;
font-style: italic;
color: #ff0000;
}
Method 2 - Inner HTML
A different approach would be to apply the same principle, but use a function to break your string into sections and then pass this to a div in your template using innerHTML - see below and this Stackblitz.
Please note that for this to work, you must also include a custom pipe to declare the HTML as safe for Angular to render with styling. This is also included in the Stackblitz, with more details here.
styleText(string){
let styledText= '';
for (let i = 0; i < this.stylePositions.length; i++) {
if(i==0){
styledText+=string.substring(0, this.stylePositions[i][0]);
} else {
styledText+=string.substring(this.stylePositions[i-1][0]+this.stylePositions[i-1][1],this.stylePositions[i][0]);
}
styledText+='<span style="color:#ff0000">'+string.substring(this.stylePositions[i][0],this.stylePositions[i][0]+this.stylePositions[i][1])+'</span>';
if(i==this.stylePositions.length-1){
styledText+=string.substring(this.stylePositions[i][0]+this.stylePositions[i][1],string.length);
}
}
return styledText;
}
I have to make text wrap convert into into two line and ellipse will add if the text is more than two line.
Currently it's wrap in multiple line and view look so weird.
What i have done so far in css:
<div class="list card item-text-wrap" ng-click="getNewsDetail(new)">
<a class="item item-thumbnail-left" href="#">
<img src="http:{{new.thumbnail}}">
<h2>{{new.summary}}</h2>
<p style="padding: 0;">{{new.date | date:'EEE, MMM d yyyy'}} {{new.date |
date:'shortTime'}}</p>
</a>
</div>
This is work perfectly when text length is short but i want to make it consistent in two line and rest of part is append with dot(...).
Any help would highly appreciate.
So you cannot accomplish this using only CSS because you must use white-space: nowrap; to be able to use text-overflow: elipsis; and nowrap will not let the words wrap down multiple lines.
Here is a similar question with a Jquery solutions: CSS word ellipsis ('...') after one or two lines
Here is a page dedicated to different version of text-overflow and the different ways to handle it: http://dotdotdot.frebsite.nl/
You are going to need JQuery to do this, but luckily you gain a lot of control and may find a better visual design rather than the ellipsis.
Of course, apply any styles to the parent elements holding the text.
e.g.
<!-- HTML -->
<!-- Give class of "date" -->
<p style="padding: 0;" class="date>{{new.date | date:'EEE, MMM d yyyy'}} {{new.date | date:'shortTime'}}</p>
// Jquery
if ($('.date').height() > 50) {
var words = $('.date').html().split(/\s+/);
words.push('...');
do {
words.splice(-2, 1);
$('.date').html( words.join(' ') );
} while($('.date').height() > 50);
}
Is it possible to convert a text to link by its id in CSS.
<span id="text">A text</span>
Change above text by CSS to a link like this:
<span id="text">A text</span>
This is not possible to do via CSS
Links are considered content, which is separate from presentation (CSS). This is by design. Content like this can only be added to the page by modifying the DOM - either dynamically in the browser via JavaScript and/or by changing the HTML returned from server-side code.
To do specifically what you are asking for, you could use JavaScript like this...
const el = document.getElementById('text')
el.innerHTML = `${el.textContent}`
<span id="text">A text</span>
...but this is often better:
const parentElement = document.getElementById('text')
const newElement = Object.assign(document.createElement('a'), {
href: 'example.org',
textContent: parentElement.textContent
})
parentElement.textContent = ''
parentElement.appendChild(newElement)
<span id="text">A text</span>
It may look more complicated than el.innerHTML='...', but this way doesn't need to be parsed, so it is the faster approach.
If you need to manipulate HTML you can do by JavaScript but there's no way to do this with css.
Example
document.getElementById('your id').innerHTML = '';
You can find more here
So I want to rig up some css rules for interview transcripts. The format I have in mind looks something like this:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>
<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>
I'd like the paragraph to be a particular colour based on the class of the preceeding heading. Is there a way to do this, as it would make the html markup significantly simpler.
You can use following-sibling combinator: +
h2.interviewer + p { /* style goes here */ }
Sure:
h2.interviewer + p {
color: red;
}
I'm not entirely sure how to do it with multiple paragraphs though. Perhaps if you encased the entire set of paragraphs in a div:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
<p>Is it ok if I ask you a question now?</p>
<p>More text here.</p>
</div>
<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
<p>Sure go ahead.</p>
</div>
You could then do this:
h2.interviewer + div {
color: red;
}
By the way, there are better HTML elements for displaying a conversation, like the newly introduced <dialog> tag
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
UPDATE:
The <dialog> element never made it into HTML5. It does not exist.