A jQuery-like html processor written in PHP
<?php
use Sulao\HtmlQuery\HQ;
$html = '
<html>
<head>
<title>Html Query</title>
</head>
<body>
<h1 class="title">this is title</h1>
<div class="content">this is <b>content</b>...</div>
</body>
</html>
';
$hq = HQ::html($html);
echo $hq('.title')->html();
//this is title
echo $hq('.content')->html();
//this is <b>content</b>...
echo $hq('.content')->outerHtml();
//<div class="content">this is <b>content</b>...</div>
echo $hq('.content')->text();
//this is content...
<?php
$html = '
<html>
<head>
<title>Html Query</title>
</head>
<body>
<h1 class="title">this is title</h1>
<div class="content">this is <b>content</b>...</div>
</body>
</html>
';
$hq = HQ::html($html);
echo $hq('.title')->html('this is new title')->html();
//this is new title
echo $hq('.content')->html('this is <b>new content</b>...')->html();
//this is <b>new content</b>...
echo $hq('.content')->text('this is new content...')->html();
//this is new content...
<?php
use Sulao\HtmlQuery\{HQ, HtmlQuery};
$html = '
<div class="container">
<img src="1.png">
<img src="2.png">
<div class="img">
<img src="3.png">
</div>
</div>
';
$hq = HQ::html($html);
$images = $hq('.container img')->map(function (DOMElement $node) {
return $node->getAttribute('src');
});
print_r($images);
//['1.png', '2.png', '3.png']
// or resolve the DOMElement to HtmlQuery instance by type hinting
$images = $hq('.container img')->map(function (HtmlQuery $node) {
return $node->attr('src');
});
print_r($images);
//['1.png', '2.png', '3.png']
// Specified which node
echo $hq('.container img')->eq(1)->attr('src');
//2.png
// Or access the DOMNode like array
echo $hq('.container img')[1]->getAttribute('src');
//2.png
<?php
use Sulao\HtmlQuery\{HQ, HtmlQuery};
$html = '
<div class="container">
<img src="1.png" width="100" onclick="zoom()">
<img src="2.png" width="100" onclick="zoom()">
<div class="img">
<img src="3.png" width="200" data-src="3" onclick="zoom()">
</div>
</div>
';
$hq = HQ::html($html);
$images = $hq('.container img');
$images->removeAttr('onclick');
echo $hq('.container')->outerHtml();
/*
<div class="container">
<img src="1.png" width="100">
<img src="2.png" width="100">
<div class="img">
<img src="3.png" width="200" data-src="3">
</div>
</div>
*/
$images->removeAllAttrs(['src']);
echo $hq('.container')->outerHtml();
/*
<div class="container">
<img src="1.png">
<img src="2.png">
<div class="img">
<img src="3.png">
</div>
</div>
*/
$images->each(function (DOMElement $node) {
$node->setAttribute('title', 'html query');
});
// Or resolve to HtmlQuery instance
$images->each(function (HtmlQuery $node, $index) {
$node->attr(['alt' => 'image ' . ($index + 1)]);
});
echo $hq('.container')->outerHtml();
/*
<div class="container">
<img src="1.png" title="html query" alt="image 1">
<img src="2.png" title="html query" alt="image 2">
<div class="img">
<img src="3.png" title="html query" alt="image 3">
</div>
</div>
*/
<?php
use Sulao\HtmlQuery\HQ;
$html = '
<div class="container">
<img src="1.png">
<img src="2.png">
<div class="img">
<img src="3.png">
</div>
</div>
';
$hq = HQ::html($html);
$hq('.container img')->not('.img img')->wrap('<div class="img"></div>');
echo $hq('.container')->outerHtml();
// The indentation maybe not the same, but the html structure should be the same.
/*
<div class="container">
<div class="img">
<img src="1.png">
</div>
<div class="img">
<img src="2.png">
</div>
<div class="img">
<img src="3.png">
</div>
</div>
*/
$hq('.container img')->unwrap();
echo $hq('.container')->outerHtml();
/*
<div class="container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
</div>
*/
$hq('<img src="0.png"/>')->prependTo('.container');
$hq->find('.container')->append('<img src="4.png"/>');
echo $hq('.container')->outerHtml();
/*
<div class="container">
<img src="0.png">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
</div>
*/
$hq("img[src='0.png']")->remove();
$hq("img[src='2.png']")->after('<img src="2.5.png"/>');
$hq("img[src='1.png']")->before($hq("img[src='4.png']"));
echo $hq('.container')->outerHtml();
/*
<div class="container">
<img src="4.png">
<img src="1.png">
<img src="2.png">
<img src="2.5.png">
<img src="3.png">
</div>
*/