I'm working on an eBook which requires me to create an overlay. All is working fine except in some cases I have a drop cap combined with the rest of the word which need to be highlighted at the same time.
The code below is my current problem. I need to have the two span ID's combined into on without destroying the html.
Any ideas?
<p class="ParaOverride-1"><span id="_idTextSpan017" class="DropCap-color CharOverride-6" style="position:absolute;top:-109.78px;left:26.39px;">W</span><span id="_idTextSpan018" class="PageText-v1 CharOverride-7" style="position:absolute;top:0px;left:1626.19px;letter-spacing:-2.6px;">hat </span>
You need a nested <span>:
<span id="myID">
<span id="x">
</span>
<span id="y">
</span>
</span>
Related
I have an HTML fragment:
<td>
<span class="x-cell">something</span>
<span class="y-cell">something</span>
<span class="z-cell">something</span>
A text
<span class="foo"/>
Another text
<span class="bar"/>
Also text
</td>
I try to select all nodes following the <span class="z-cell"/> to move them into another node. But all the nodes within td are optional, I can have zero to three <span class="*-cell"/>, the text is optional and there could be further <span> nodes in the middle/begin/end of the text or not.
In short, I have to move all nodes except the <span class="*-cell"/> into another node. I tried XPath to select the nodes:
td/span[contains(#class,"-cell")][last()]/following-sibling::*
but it doesn't work, if there aren't any <span class="*-cell"/> nodes. How I could solve that?
Have your xpath expression exclude all elements you do not want:
td/(*[not(contains(#class,"-cell"))]|text())
If you only want to copy elements without the intervening text this simplifies to
td/*[not(contains(#class,"-cell"))]
Live Demo on XPathTester
I'm trying to fix my HTML views for W3C validation. On error is that I had some rare div or structural tags in a span tag. Here's a fake example made from my HTML codes :
<div style="margin-left:10px;">
<h2>Sub Title</h2>
<span><span class="bold_text">Phones : </span> 000-000-000000 / 000-000-000000 </span>
<br/>
<span><span class="bold_text">Email : </span>
<ul>
<li>For Support use <a href="mailto:support#email.com" >support#email.com</a></li>
<li>For CopyRights use <a href="mailto:copyright#email.com" >copyright#email.com</a></li>
<li>For Technical issue use <a href="mailto:staff#email.com" >staff#email.com</a></li>
</ul>
</span>
<span>
<span class="bold_text">Location : </span>
<div class="address_container">#0, City, Region, Country</div>
</span>
<div class="map_container" style="margin-top:10px;display:inline-block;width:90%;height:400px;" >
#yield('map_member')
</div>
I'm playing with regex101 and so far I got this :
<span[^>]*>[.\s\S]*<div[\s\S]*<\/div>[\s\S]*<\/span> /gm
It must match new lines and spaces. But this select the 1st and finishes on the last span ending tag . But I want it to point only to :
<span>
<span class="bold_text">Location : </span>
<div class="address_container">#0, City, Region, Country</div>
</span>
To replace those DIV within the SPAN, while there is SPAN within the SPAN?
One can also assume that if it ended with SPAN that it also started with SPAN.
So this regex just uses a positive lookahead to check if the DIV is followed by 0 or more enclosed DIV or SPAN, then closed with SPAN.
\s*<div[^<>]*>[^<>]*</div>(?=(?:\s*<(div|span)[^<>]*>[^<>]*</\1>)*[^<>]*</span>)
Replace with nothing and it'll be spick-and-span.
I am trying to use angular truncate to truncate some elements. I know how to truncate words by {{something.something | characters:50}}. But what i want to do is, for example, i have a bold text <b> Comfortable </b> and then i have 3 other features listed <span> Air conditioned </span>
<span> Safe </span>
<span> Fast </span>
I want to add a read me button.
Now what i want basically is only the "Comfortable" will be visible at first but when someone click the read more button it will be expanded and show the rest 3 . How can i do that? I dont want to use jQuery here. Can this be done in angular?
Pretty easy to achieve. You should initialize the readmore in your controller also.
<div>
<span >Comfortable</span>
<span ng-show="readmore"> Air conditioned </span>
<span ng-show="readmore"> Safe </span>
<span ng-show="readmore"> Fast </span>
<div ng-hide="readmore" ng-click="readmore = true">Read more</div>
<div ng-show="readmore" ng-click="readmore = false">Read less</div>
</div>
If possible put this tag to cover all your span (except Bold one)
<a ng-click="isShowMore = !isShowMore" ng-hide="isShowMore">Show More</a>
<div ng-show="isShowMore">
<span> Air conditioned </span>
</div>
<a ng-click="isShowMore = !isShowMore" ng-show="isShowMore">Show Less</a>
You can simply use ng-hide , ng-show or ng-if.
<b> Comfortable </b>
<button ng-click="visible = true">Read More...</button>
<div ng-show="visible">
<span>...</span>
<span>...</span>
<span>...</span>
</div>
The goal is to get the code of the user named Nick who's title is Mr with xpath1.0.
<span class="user">
<span class="master">
<span class="user-title" title="Mr">
<span class="name">Nick</span>
</span>
<span class="user-info">
<span class="code">A</span>
</span>
</span>
</span>
<span class="user">
<span class="master">
<span class="user-title" title="Mr">
<span class="name">Bob</span>
</span>
<span class="user-info">
<span class="code">B</span>
</span>
</span>
</span>
I would divide it into several steps to understand how xpath works in this case.
//span[contains(., 'Nick']) can get that node, but how to get the person's code info which is in next node?
You could do something like:
//span
[#class='user']
[.//span[#class='name']='Nick']
//span[#class='code']
/text()
Basically this says:
Find the user span that contains the name span with text Nick
Within that user span, find the code span
For the code span, return the text
Alternatively, you could directly navigate to the sibling element. However, it is not as readable:
//span[.='Nick']/../following-sibling::*[1]/span/text()
This says to find the span with text Nick. From there, go to the parent (the user-title span). Then go to the next sibling (the user-info span). Then get the span in there, which is the code span.
Suppose to have an article in an HTML Web page. The aim is to markup the content using such a schema (I prefer those provided by schema.org). Hence, one starts to markup the contents by following the schema.org/Article. The point is, if the article belongs to multiple sections, should one put each section in a separate span as follows:
<span itemprop="articleSection">Section1</span> -
<span itemprop="articleSection">Section2</span> -
<span itemprop="articleSection">Section3</span>
or it is equivalent to let them in a unique span like in the following?
<span itemprop="articleSection">Section1 - Section2 - Section3</span>
If your article is part of many different sections, then you should mark each one as a articleSection like in your first example:
<div itemscope itemtype="http://schema.org/Article">
<span itemprop="name">President to throw ceremonial first pitch at Nationals Park</span>
by <span itemprop="author">John Smith</span>
<span itemprop="articleSection">Sports</span> -
<span itemprop="articleSection">Politics</span> -
<span itemprop="articleSection">US News</span>
</div>