עיבוד 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();
	
  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();

 

מקרה 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();
	
  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(); 
	
  return $html;
}

לכל מדריכי ה-PHP

הוסף תגובה חדשה

 

= 9 + 2