I want to grab all the text after the div that is called: <p class="meta"></p> so I basically do not want the content contained in this div. Everything else after I do want, so everything after the closing p tag.
Here is the full code:
<div id="post">
<p class="meta"> <img src='http://images.test.com/bin/famfamfam_flags/png/gb.png' border="0" align="absmiddle" alt='Flag of United Kingdom' onerror="this.onerror=null; this.src='/bin/famfamfam_silk/gifs/flag_blue.gif'; return false;"/>
New Zealand,
a link,
NZ
<br/>
<span class="date">Sunday, November 25, 2012</span>
<br/>
<iframe class="like_frame" scrolling="no" frameborder="0" style="border:none ;overflow:hidden; width:327px; padding-top:14px; height:24px;" allowTransparency="true"></iframe>
</p>
Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text.
</div>
You can use the following-sibling:
//p[#class="meta"]/following-sibling::node()
Demo (using xmllint):
$ xmllint index.html --xpath '//p[#class="meta"]/following-sibling::node()'
Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum
text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text Lorum ipsum text.
Related
I am trying to target all the p tags, where there is no strong tag as a child or grandchild(child of the child) of the p tag.
here is the sample
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>
</p>
<p>
<strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a></strong>
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a><strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</strong></a>
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a><strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</strong></a>
</p>
In the above code, the 2nd, 3rd, and last one are the ones that I don't want but I want the rest of them. I have gotten as far as this XPath:
//p[not(child::strong)] which removes the 2nd paragraph, but when i add the a>strong like //p[not(child::strong) or not(child::a > strong)] the second part is being ignored. Can anyone point out where am I going wrong and how to fix this issue?
You want //p[not(strong) and not(*/strong)].
How can I add carousel without click handler using react-bootstrap
<Carousel></Carousel>
When you look into the documentation, you will find out, that a Carousel is working without any click handler per default: https://react-bootstrap.netlify.app/components/carousel/#example
Just define Carousel.Items or images directly and you are ready to go: the image will change every every 5 seconds:
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=First slide&bg=373940"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Second slide&bg=282c34"
alt="Second slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Third slide&bg=20232a"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
I use the templates plugin for my ckeditor and I input a 2 column structure like this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="two_col half">
<p>Info Block Two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
My content editors then edit the content of each div and input whatever text they need to.
The issue I'm having is that when my editors highlight the lorem ipsum text and delete it to start their content, the delete action also deletes the actual div itself, resulting in this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
Is there something I can do to stop that from happening, I would like the div to remain after the user deletes the lorem ipsum placeholder text.
I'm using version 4.5.4
I don't know how to prevent it from the CK Editor perspective, but from Kentico point of view, you can style the template to have two Editable texts next to each other for those two columns. You can either have two web part zones - one editable text per each or two texts in one zone.
I have an html like so:
<div class="content">
<h1>Title 1</h1>
Lorem ipsum 1
<h2>Title 2</h2>
Lorem ipsum 2
<h3>Title 3</h3>
<b>Lorem ipsum 3</b>
<h1>Title 4</h1>
Lorem ipsum 4
<h2>Title 5</h2>
Lorem ipsum 5
</div>
I want to extract content under each header title and place them into an array like so:
[
"Lorem ipsum 1",
"Lorem ipsum 2",
"<b>Lorem ipsum 3</b>",
"Lorem ipsum 4",
"Lorem ipsum 5"
]
How would I do that using regex and/or ruby? I tried playing around with split method, like html_body.split(">"), but still can't figure out how to do so correctly. What is the correct way to do it using regex and/or ruby?
You shouldn't reinvent the wheel. Using Nokogiri is more robust than trying from scratch.
require "nokogiri"
html = <<_
<div class="content">
<h1>Title 1</h1>
Lorem ipsum 1
<h2>Title 2</h2>
Lorem ipsum 2
<h3>Title 3</h3>
<b>Lorem ipsum 3</b>
<h1>Title 4</h1>
Lorem ipsum 4
<h2>Title 5</h2>
Lorem ipsum 5
</div>
_
Nokogiri::HTML(html)
.css("div")
.children
.reject{|e| e.name =~ /\Ah\d\z/}
.map{|e| e.to_html.strip}.reject(&:empty?)
result:
[
"Lorem ipsum 1",
"Lorem ipsum 2",
"<b>Lorem ipsum 3</b>",
"Lorem ipsum 4",
"Lorem ipsum 5"
]
You can use the regex
/(?<=<\/h\d>\n).*/gm
and trim the match to get the desired output.
DEMO
another newbie-question regarding rails and bootstrap.
I am using something like this:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">About us</li>
<li>Address</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<%= render 'about_us' %>
</div>
<div class="tab-pane" id="tab9">
<%= render 'address' %>
</div>
</div>
My problem is that I render 'address' which includes a form. By submitting this form I end up in an different controller. After saving a new address with this controller I would like to redirect to this page and show the address tab.
The redirect command I tried was: redirect_to salon_path(#salon.id.to_s + "#tab9")
This results in calling the url .../salons/1%23tab9. What I think I need its .../salons/1#tab9.
But maybe you are having a better solution how to choose one specific tab.
Using:
gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.3'.
I could figure it out myself, this post here brought me onto the right track: How to get Twitter-Bootstrap navigation to show active link?
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="<%= 'active' if params[:tab] == 'tab1' %>">About us</li>
<li class="<%= 'active' if params[:tab] == 'tab9' %>"> Address</li>
</ul>
<div class="tab-content">
<div class="<%= if (params[:tab] == 'tab1' || !params[:tab])then 'tab-pane active' else 'tab-pane' end%>" id="tab1">
<%= render 'about_us' %>
</div>
<div class="<%= if params[:tab] == 'tab9' then 'tab-pane active' else 'tab-pane' end%>" id="tab9">
<%= render 'address' %>
</div>
</div>
And in my example I call it like this:
redirect_to salon_path(#salon.id, tab:"tab9")
For future reference and for users with similar issues, I would add one more feature to Marcus's response. The solution itself is perfect and works like a charm but what happens if no tab parameter is passed? Then bootstrap does not show any tab content and only the tabs are shown. For me, this looks rather ugly and unprofessional. In my case, I added the following jQuery to fix it.
$(document).ready(function() {
//The following set of code checks to see if any tab is already active (this occurs if a parameter to tab would be passed)
//If no tab is active, make the first tab and tab-pane active
var elementAlreadyActive = false;
$('.nav-tabs li').each(function(index, li) {
var element = $(li);
if (element.attr("class") == "active"){
elementAlreadyActive = true;
}
});
if (!elementAlreadyActive){
$('.nav-tabs li:first').addClass('active');
$('.tab-content div:first').addClass('active');
} });
Instead of showing nothing if the parameter is not passed, the code checks all the li elements to see if any are already active. If none of them are, it makes the first tab and tab-pane active.
Although making the first tab active may not be useful to everybody, the code above can easily be modified to make a specific tab active if no parameters are passed.
You just have to do data-toggle="tab" for each list item anchor and the class="tab-pane" for each tab
<div class="tabbable">
<ul class="nav nav-tabs" id="proftabs">
<li><a href="#profile_tab" data-toggle="tab" >Profile</a></li>
<li>Friends</li>
<li>Photos</li>
<li>Videos</li>
<li>Quotes</li>
<div class="tab-content">
<div id="profile_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid excepturi id, maxime nesciunt recusandae repellat unde veritatis! Eveniet, fugiat, ipsum. Architecto assumenda, culpa impedit molestias natus porro quisquam repudiandae sunt!
</div>
<div id="friends_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis cupiditate incidunt. Accusantium adipisci architecto dignissimos eligendi est explicabo ipsa molestiae nesciunt optio porro provident, sint soluta, tempore temporibus vitae?
</div>
<div id="photos_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ex harum iste magnam necessitatibus sed sit. A adipisci amet cupiditate delectus dolor itaque numquam officia omnis, provident quod temporibus voluptatibus?
</div>
<div id="videos_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto at autem dolore, dolorum eaque earum eius, id in iste molestias officia, possimus qui quis recusandae repellat reprehenderit suscipit voluptatum!
</div>
<div id="quotes_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur, in necessitatibus qui quidem tenetur unde voluptatum! Aspernatur dolorem earum id labore molestiae nam quas quisquam, sapiente sequi ut voluptatibus.
</div>
</div>
</div>