I have html content which look like this:
html code ... </div>content1</div> html code ...
html code ... </div>content2</div> html code ...
and I would like to extract the content1/2/3... from the HTML as content1 new line content2 new line content3 any idea ? Thanks in advance.
Here's an example using Mojo::DOM, inspired by this StackOverflow answer:
#!/usr/bin/env perl
use strict ;
use warnings ;
use Mojo::DOM ;
my $html = <<EOHTML;
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML with 2 divs</title>
</head>
<body>
<div>
Four score and seven years ago our fathers brought forth on this
continent a new nation, conceived in liberty, and dedicated to the
proposition that all men are created equal.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
EOHTML
my $dom = Mojo::DOM->new ;
$dom->parse( $html ) ;
for my $div ( $dom->find( 'div' )->each ) {
print $div->all_text . "\n" ;
}
The output is:
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Related
I am trying to create a background text color that tracks to the width of each line of multi line text. See image below:
I have only been able to get a basic box background color using .background(Color.black)
it gives a background to the entire text box. The desired effect is to give the background only to the end of each line of text.
I only know how to solve this in PHP/CSS.
First, put the text into a variable.
then replace all spaces through the div tags. then add the CSS for the div. and that's it:
!Important! be sure that at the beginning and the is no space and in the middle of the text are not enter space
Here my code example:
<style>
.divs{
background-color: black;
color: white;
margin: 5px 0px 5px 0px;/* space from top and bottom*/
padding-left: 5px;/* word spacing */
float: left;/* Importand to stick them together */
font-size: 20pt;
}
</style>
<div>
<?php
$yourtext = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
echo "<div class='divs'>".str_replace(" ", "</div> <div class='divs'>", $yourtext)."</div>";
?>
</div>
But I'm sure that the same method is possible with SwiftUI by just looping the text and replace the space
--> just search for text-replacing in SwiftUI and you will find what you need
I am trying to get all of the slides in my orbit slider to be the height of the largest slide.
Here is my markup:
$(document).ready(function(){
$('.orbit-container').equalize('outerHeight');
});
<div class="orbit" data-orbit="" role="region" data-auto-play="false" data-resize="7sdsk0-orbit" id="7sdsk0-orbit" data-t="3k1v70-t"><button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀︎</button><button class="orbit-next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶︎</button><div class="orbit-wrapper">
<ul class="orbit-container" data-options="bullets: true; autoPlay:false;" data-auto-play="false" data-equalizer="" data-equalize-on-stack="true" data-equalize-by-row="true" data-resize="lo2q16-eq" data-mutate="k2tsn5-eq" data-t="fgxh6n-t" tabindex="0" style="height: 0px;" data-events="mutate">
<li data-equalizer-watch class="orbit-slide" data-slide="0">
<div>
<div class="text-container">
<h1>Arthritis. Give Before it takes.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Homepage%20Billboards/mobile-cropped.jpg?ext=.jpg">
</div>
</li>
<li data-equalizer-watch class="orbit-slide is-active" data-slide="1" aria-live="polite">
<div>
<div class="text-container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Test%20Images/rough-mobile.jpg?ext=.jpg">
</div>
</li>
</ul>
</div>
On each li, an inline style is being applied of height="auto", so the slides are different heights. Even if I call that function after the window has loaded, it has the same effect.
Am I missing something?
I'm using ZURB Foundation (v6) Accordions.
When an accordion opens, I want to scroll the page to be at the top of that accordion item. I can run this code:
$("#arf").on("down.zf.accordion", function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 'slow');
});
Of course, this scrolls the page to the top of the accordion, not the accordion item. How would I modify this code to scroll to the accordion's item when it opens?
Here is the solution that I found that works. This works for version 6 of Foundation for Sites.
$("#form-selector").on("up.zf.accordion", function(event) {
setTimeout(function(){
$('html,body').animate({scrollTop: $('.is-active').offset().top}, 'slow');
}, 250); //Adjust to match slideSpeed
});
The setTimeout is used because of the slideSpeed of the accordion. If you do not use setTimeout it scrolls the moment down.zf.accordion fires thus scrolling to the wrong position.
You can also us down.zf.accordion in place of up.zf.accordion, however, if you use down.zf.accordion, it will fire once the page loads (as the accordion is initialized and opens) and scrolls to the accordion item. This is unwanted in my case but may be desired in certain case.
You could attach your own click listeners to each accordion <a> tag and scroll to the top of that tag on click. Eg.
JS
$('.accordionBtn').on('click', function(event) {
$('html,body').animate({scrollTop: $(event.target).offset().top}, 'slow');
});)
CSS
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel1a">Accordion 1</a>
<div id="panel1a" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel2a">Accordion 2</a>
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel3a">Accordion 3</a>
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>
I first used the solution posted by #L84 then I thought of this one.
In the code below, $active references the currently active accordion item (Note: the reference is stored each time an accordion is opened rather than when the accordion title is clicked). When a new title is clicked, $active is the item that will be closed. We need to know its height in advance.
For the newly active accordion item to be properly positioned, the height of that previously active item has to be subtracted from the viewport's scrolling position -- note that this in necessary only if the newly active item is located further down.
$(function () {
var $active;
$(".accordion").on("click", ".accordion-title", function () {
var itemIndexNew = $(".accordion-item").index($(this).parent());
var itemIndexOld = ($active ? $(".accordion-item").index($active) : null);
if (itemIndexOld !== null && itemIndexOld < itemIndexNew) {
$("html, body").scrollTop($(window).scrollTop() - $active.height());
}
});
$(".accordion").on("down.zf.accordion", function(e) {
$active = $(".accordion").find(".accordion-item.is-active");
});
$(document).foundation();
});
You could use the below script, im also using foundation 6 accordion, this will work also if you have multiple accordions on single page. Thanks
jQuery(".accordion-title").click(function() {
var $this = this;
setTimeout(function(){
jQuery('html,body').animate({scrollTop: jQuery($this).closest('.accordion').find('.is-active').offset().top}, 'slow');
}, 250);
});
I have a string like this
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<img src="foo.php?n=bar.jpg">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
<img src="somesource.jpg">
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<img src="foo.php?n=bar_2.jpg">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<img src="foo.php?n=bar_93.jpg">
.
I am now looking for a regex that gives me back all the <img> tags where the source contains bar
So the output should be:
<img src="foo.php?n=bar.jpg">
<img src="foo.php?n=bar_2.jpg">
<img src="foo.php?n=bar_93.jpg">
Could anyone help me out please ?
This regex should do it
<img((bar)|[^>])*?>(?(2)(?=)|(?!))
It uses a conditional expression to see if "bar" was matched in group 2
How do I short an text in django? For example:
I have this text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
And I want to get:
Lorem ipsum dolor sit amet, consectetur adipisicing elit(more)
Where "(more)" is a link to show the entire text.
Can someone help me? Thank you very much in advance!
Have you tried the template tag truncatechars?
{{ value|truncatechars:[number to truncate chars after] }}
Check out how you'd handle the (more) part here:
If you actually wanted a link to persist and not just hover, you would probably want to use javascript to manipulate your DOM.
Make sure 15 (this is arbitrary) is greater than the number you're slicing by:
{% if value|length > 15 %}
{{ value|slice:"-6" }}(more)
{% else %}
{{ value }}
{% endif %}