עיבוד HTML באמצעות ספריית DomDocument של PHP
במדריך קודם הצגתי על קצה המזלג את הנושא של ביטויים רגולריים ב-PHP, קבלתי מספר תגובות שלפיהם אסור לעשות עיבוד (parsing) של הטמ"ל באמצעות ביטויים רגולריים. אז כפי שכתבתי למגיב ישראל. כדאי לעשות parsing כשאין ברירה וכשהמבנה ידוע מראש. במדריך זה אני מציע גישה חלופית שמשתמש ב-DomDocument, שהוא קלאס מובנה של PHP, שלא צריך להתקין אותו. הקלאס יודע לעבד קוד HTML, לזהות ולהחליף אלמנטים של הקוד בלי צורך בביטויים רגולריים.
המדריך בנוי מארבעה תיאורי מקרה, וההסברים הם בעיקר בגוף הקוד.
מקרה 1: כיצד להפוך תמונות לרספונסיביות
כדי להפוך את התמונות לרספונסיביות נעטוף את התמונות ב-div שלו יש class ששמו 'responsive-img'.
function makeResposiveImages($html='')
{
// Create a DOMDocument
$dom = new DOMDocument();
// Load html including utf8, like Hebrew
$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
// Create the div wrapper
$div = $dom->createElement('div');
$div->setAttribute('class', 'responsive-img');
// Get all the images
$images = $dom->getElementsByTagName('img');
// Loop the images
foreach ($images as $image)
{
//Clone our created div
$new_div_clone = $div->cloneNode();
//Replace image with wrapper div
$image->parentNode->replaceChild($new_div_clone,$image);
//Append image to wrapper div
$new_div_clone->appendChild($image);
}
// Save the HTML
$html = $dom->saveHTML($dom->documentElement);
return $html;
}
כדי להשתמש בקלאס DomDocument אנחנו חייבים לאתחל אותו באמצעות
$dom = new DOMDocument();
טענו את ה-html, כולל התייחסות לעברית
$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
יצרנו div עוטף לתמונות שיש לו את הקלאס 'responsive-img'
$div = $dom->createElement('div');
$div->setAttribute('class', 'responsive-img');
מיצינו את התמונות מה-html
$images = $dom->getElementsByTagName('img');
בהמשך, עברנו בתוך לולאה על התמונות והדבקנו סביב כל אחת את הדיב העוטף.
בסוף, צריך לשמור את השינויים באמצעות
$html = $dom->saveHTML($dom->documentElement);
מקרה 2: עיבוד סרטוני Youtube המוטמעים באתר
הקוד הבא מזהה תגיות iframe שבאמצעותם מוטמעים סרטוני Youtube באתר ועורך שינויים הכוללים הוספת תגיות של הפעלה אוטומטית autoplay, שינוי ממדי הסרטון והוספת קלאס.
function betterEmbeddedYoutubeVideoes($html='')
{
$doc = new DOMDocument();
$doc->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
$docVideos = $doc->getElementsByTagName('iframe');
foreach($docVideos as $docVideo)
{
// Get the 'src' attribute of the iframe
$docVideoSrc = $docVideo->getAttribute('src');
// Parse the src url
$docVideoSrcParts = parse_url($docVideoSrc);
// Add autoplay attribute to the src
$newVideoSrc = $docVideoSrcParts['scheme'] . '://' . $docVideoSrcParts['host'] . '/' . $docVideoSrcParts['path'] . '?autoplay=1';
// Set the source
$docVideo->setAttribute('src', $newVideoSrc);
// Set the dimensions
$docVideo->setAttribute('height', '433');
$docVideo->setAttribute('width', '719');
// Set the class
$docVideo->setAttribute('class', 'embed-responsive-item');
}
$html = $doc->saveHTML($dom->documentElement);
return $html;
}
מקרה 3: הסרת תגיות ה-style מאלמנטים בתוכן
הלקוחות שלי אוהבים להשתמש בפלגאינים של עריכת טקסט שמקלים עליהם את הזנת הנתונים. עריכת הטקסט בדרך זו גורמת להכנסת תגיות style בכל מיני מקומות, וכתוצאה מכך מנועי חיפוש וקוראי מסך מתקשים לעבד את תוכן האתר. כך שהפגיעה היא כפולה. גם בקידום האתר במנועי החיפוש וגם בהנגשת האתר לבעלי מוגבלויות.
אני מטפל בבעיה באמצעות הפונקציה הבאה שמנקה באמצעות DOMDocument את תגיות ה-style.
function stripStyleTags($html='')
{
$dom = new DOMDocument;
$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
$xpath = new DOMXPath($dom);
// Find any element with the style attribute
$nodes = $xpath->query('//*[@style]');
// Loop the elements
foreach ($nodes as $node)
{
// Remove style attribute
$node->removeAttribute('style');
}
$html = $dom->saveHTML($dom->documentElement);
return $html;
}
מקרה 4: הוספת rel=nofollow לקישורים באופן אוטומטי
השדה rel=nofollow נוסף לתגית של קישור, ומורה לעכבישי הרשת של מנועי חיפוש להימנע מלהיכנס לקישור, ולצאת מהדף. נהוג להשתמש בטכניקה כדי למנוע את הפחתת הדירוג של הדף בתוצאות החיפוש. הפחתה שנובעת מכך שהאתר שמקשר לאתר אחר מצביע עליו כסמכותי יותר, ומוריד ממידת הסמכות שלו.
הקוד להלן מוסיף את השדה באופן אוטומטי לקישורים, ויכול להיות שימושי באתרים שבהם המשתמשים מזינים את התכנים.
function addRelNofollowToLinks($html)
{
$dom = new DOMDocument;
$dom->loadHTML(mb_convert_encoding($html, 'HTML-ENTITIES', 'UTF-8'));
// Find any element which is a link
$nodes = $dom->getElementsByTagName('a');
// Loop the elements
foreach ($nodes as $node)
{
// Add the rel attribute
$node->setAttribute('rel', 'nofollow');
}
$html = $dom->saveHTML($dom->documentElement);
return $html;
}
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.