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

$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;
}

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

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים