PostgreSQL replace specific html element - sql

I´d like to change a HTML snippet stored in database.
Let's assume there is only one table called table with columns id and content. In content column are stored HTML snippets
It has this kind of format
<div class="header">etc etc </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
(and possibly more complex html structure).
The goal is to replace the content div (so div with class content, there is guaranteed that there is just one div with this class identifier) from stored string with some text, for example "TEXT" using SQL on PostgreSQL.
So in this case the result would be
<div class="header">etc etc </div>
TEXT
<div class="footer"> footer </div>
Thank you

I'd use REGEX_REPLACE() for this:
demo:db<>fiddle
SELECT
REGEXP_REPLACE(html, '<div class="content">.*?</div>', 'MY TEXT')
FROM t

Related

Can I use structural search in HTML files to find nested tags?

I want to find and replace some child tags that are nested inside parent tag.
Here is my template:
<$tag$ $attribute$=$value$>
<$childTag$ $childAttr$=$childValue$ />
<$tag$/>
I apply text filtering via regex to $value$ and to $childValue$:
$value$ filter is .*sm-landing-appstore-app-1-gallery--main.*
$childValue$ filter is sm-landing-appstore-app-1-gallery__slide-img
And this is a part of an HTML document where I want to find my sm-landing-appstore-app-1-gallery__slide-img and replace it:
<div class="sm-landing-appstore-app-1-gallery__main-gallery">
<div class="sm-landing-appstore-app-1-gallery__main-gallery-frame-wr swiper-container">
<div class="sm-landing-appstore-app-1-gallery__frame sm-landing-appstore-app-1-gallery__main-gallery-frame swiper-wrapper">
<div class="sm-landing-appstore-app-1-gallery__slide sm-landing-appstore-app-1-gallery__main-gallery-slide sm-landing-appstore-app-1-gallery__main-gallery-slide--screenshot swiper-slide"
data-index="0" data-id="0">
<div id="cmp-6" class="sm-ratio sm-landing-appstore-app-1-gallery__slide-in">
<div class="sm-ratio__placeholder"></div>
<div class="sm-ratio__body">
<div class="sm-landing-appstore-app-1-gallery__slide-cv"><img
class="sm-landing-appstore-app-1-gallery__slide-img"
src="img/Fitness%20Buddy/1.jpg" alt="EasyFitness gallery 1" data-number-image="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But the syntax of my search template is incorrect.
Is finding of nested tags even possible with IntelliJ structural search?

How to do AND or OR in XPATH on combined divs

I would like to get a DIV based on two conditions in children DIVs.
//div//[child::div[text()="Administrator"] and //child::div[text='No card']]
But and condition appears to be working on properties of a single element.
Kindly advise how to achieve something like above, using either Xpath or CSSSelector
HTML:
<div>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carHolderRow-" style="transition: s;">
<h4 class="-shared-react-components1Lsp1">Mr.</h4>
<div class="src-containers-Quo-SimpleCard-components-styles-index__carDetails--3xMqU">
<div class="src-containers-Quo-SimpleCard-components-1bGot">bla</div>
<div class="src-containers-Quo-SimpleCard-components--1bGot">Administrator</div>
<div><button class="src-containers-Quo-simpleCard-" type="button">Edit</button><button class="src-containers-Quo-SimpleCard-" type="button">Delete</button></div>
</div>
</div>
</div>
Many thanks
Basically if you want to select div by text values of two child div elements, you can do
//div[div="Administrator" and div="No card"]
Let me know (update your question) if you faced with another issue
P.S. Note that //div[//child::div[text='No card']] means something like return FIRST div if there is a div with text 'No card' somewhere in DOM, but not what you expect

MaterializeCSS card-action can only align links, not buttons with forms

I am using the first basic card example from http://materializecss.com/cards.html as a starting point. The card-action div contains two links that render beautifully.
Now I want to add a new card action that doesn't just open a link but performs an action. This could probably be done using a standard link with an tag as well but since I'm using Rails my standard way is that this action becomes a button with a form around it. It looks like this now:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
This is a link
<form>
<a class="waves-effect waves-light btn">button</a>
</form>
</div>
</div>
</div>
</div>
I would have expected that the button is nicely aligned with the two existing links, in one row at the bottom of the card. But what actually happens is that the button appears in the line below.
How can I align a button with a form together with standard HTML link tags in one row?
UPDATE: here is a JSFiddle with the code above: https://jsfiddle.net/hendrikbeck/zq1pv3y6/
You just need to add display: inline to your form tag.
See the updated JSFiddle : https://jsfiddle.net/zq1pv3y6/2/

How to check if a web element does not have another inner web element

I am using Selenium and Java to write a test, I need to check if a web element does not have another web element inside it, for example:
<div><span>bla bla</span></div>
<div><g></g></div>
<div><li></li></div>
I need to select the div tags which does not have <span> inside them, so do we have something like:
//div[not(.//span[text()='bla bla'])]
Please do not tell me how to do it in other ways as I already know, I am just wondering if I can do it in a way like the one above.
Your XPath should've done what you wanted. It will select <div> element that doesn't contain, either direct child or nested, span element with text equals "bla bla". See the demo online : http://www.xpathtester.com/xpath/be01362aa9bb1385da6dcf819cf69376
input :
<div>
<div>
<span>bla bla</span>
</div>
<div>
<g/>
</div>
<div>
<li/>
</div>
</div>
output :
<div>
<g/>
</div>
<div>
<li/>
</div>

check existense of div with id and insert some html code

How can I insert something just below a certain div?
I have a jwplayer on my page which usually have an id of jwplayer-1 being inserted by jwplayer plugin for wordpress.
What I want to be able to do is to insert a div just below that if it exist.
So for example, if my page has a player, somewhere on the page there will be
<div id="jwplayer-1>Player will appear here</div>
What I want to be able to do is to check if that line exist, if it does, insert another div so the code will be like this.
<div id="jwplayer-1>Player will appear here</div>
<div id="viewcount">Total Views: <?php showviews()?></div>
Thanks
You can do:
$('<div id="viewcount">Total Views: X</div>').insertAfter($('#jwplayer-1'));
You could use jQuery's append method if you were to put your div within another div as such:
html:
<div id="container">
<div id="jwplayer-1>Player will appear here</div>
</div>
javascript:
$('.container').append('<div id="viewcount">Total Views: <?php showviews()?></div>');
sources:
http://api.jquery.com/append/