Nettoyage du HTML en supprimant les balises de formatage supplémentaires/redondantes

Question

J'ai utilisé CKEditor éditeur wysiwyg pour un site web où les utilisateurs sont autorisés à utiliser l'éditeur HTML pour ajouter des commentaires. J'ai fini par avoir un code HTML imbriqué extrêmement redondant dans ma base de données qui ralentit l'affichage et l'édition de ces commentaires.

J'ai des commentaires qui ressemblent à ceci (c'est un très petit exemple, j'ai des commentaires avec plus de 100 balises imbriquées) :

<p>
 <strong>
  <span style="font-size: 14px">
   <span style="color: #006400">
     <span style="font-size: 14px">
      <span style="font-size: 16px">
       <span style="color: #006400">
        <span style="font-size: 14px">
         <span style="font-size: 16px">
          <span style="color: #006400">This is a </span>
         </span>
        </span>
       </span>
      </span>
     </span>
    </span>
    <span style="color: #006400">
     <span style="font-size: 16px">
      <span style="color: #b22222">Test</span>
     </span>
    </span>
   </span>
  </span>
 </strong>
</p>

Mes questions sont les suivantes :

• Existe-t-il une bibliothèque, un code ou un logiciel capable d'effectuer un nettoyage intelligent (c'est-à-dire tenant compte du format) du code HTML, en supprimant toutes les balises redondantes qui n'ont aucun effet sur le formatage (car elles sont remplacées par des balises internes) ? J'ai essayé de nombreuses solutions en ligne existantes (telles que HTML Tidy ). Aucun d'entre eux ne fait ce que je veux.

• Sinon, je devrai écrire du code pour l'analyse et le nettoyage du HTML. Je prévois d'utiliser PHP Simple HTML DOM pour parcourir l'arbre HTML et trouver toutes les balises qui n'ont aucun effet. Suggérez-vous un autre analyseur HTML qui conviendrait mieux à mon objectif ?

Merci

.

Mise à jour :

J'ai écrit un code pour analyser le code HTML que je possède. Toutes les balises HTML que j'ai sont :

• <span> avec des styles pour font-size et/ou color
• <font> avec des attributs color et/ou size
• <a> pour les liens (avec href )
• <strong>
• <p> (balise unique pour envelopper le commentaire entier)
• <u>

Je peux facilement écrire un code pour convertir le code HTML en bbcode (par ex. [b] , [color=blue] , [size=3] etc). Ainsi, le HTML ci-dessus deviendra quelque chose comme :

[b][size=14][color=#006400][size=14][size=16][color=#006400]
[size=14][size=16][color=#006400]This is a [/color][/size]
[/size][/color][/size][/size][color=#006400][size=16]
[color=#b22222]Test[/color][/size][/color][/color][/size][/b]

La question maintenant est : Existe-t-il un moyen facile (algorithme/librairie/etc) de nettoyer le bbcode désordonné (aussi désordonné que le HTML original) qui sera généré ?

merci encore

Answer 1

Introduction

La meilleure solution que j'ai vue jusqu'à présent consiste à utiliser HTML Tidy http://tidy.sourceforge.net/

En plus de convertir le format d'un document, Tidy est également capable de convertir automatiquement les balises HTML obsolètes en leurs équivalents CSS (cascading style sheet) grâce à l'option clean. La sortie générée contient une déclaration de style en ligne.

Il garantit également que le document HTML est xhtml compatible

Exemple

$code ='<p>
 <strong>
  <span style="font-size: 14px">
   <span style="color: #006400">
     <span style="font-size: 14px">
      <span style="font-size: 16px">
       <span style="color: #006400">
        <span style="font-size: 14px">
         <span style="font-size: 16px">
          <span style="color: #006400">This is a </span>
         </span>
        </span>
       </span>
      </span>
     </span>
    </span>
    <span style="color: #006400">
     <span style="font-size: 16px">
      <span style="color: #b22222">Test</span>
     </span>
    </span>
   </span>
  </span>
 </strong>
</p>';

Si vous RUN

$clean = cleaning($code);
print($clean['body']);

Sortie

<p>
    <strong>
        <span class="c3">
            <span class="c1">This is a</span> 
                <span class="c2">Test</span>
            </span>
        </strong>
</p>

Vous pouvez obtenir le CSS

$clean = cleaning($code);
print($clean['style']);

Sortie

<style type="text/css">
    span.c3 {
        font-size: 14px
    }

    span.c2 {
        color: #006400;
        font-size: 16px
    }

    span.c1 {
        color: #006400;
        font-size: 14px
    }
</style>

Notre HTML COMPLET

$clean = cleaning($code);
print($clean['full']);

Sortie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
/*<![CDATA[*/
    span.c3 {font-size: 14px}
    span.c2 {color: #006400; font-size: 16px}
    span.c1 {color: #006400; font-size: 14px}
    /*]]>*/
    </style>
  </head>
  <body>
    <p>
      <strong><span class="c3"><span class="c1">This is a</span>
      <span class="c2">Test</span></span></strong>
    </p>
  </body>
</html>

Fonction utilisée

function cleaning($string, $tidyConfig = null) {
    $out = array ();
    $config = array (
            'indent' => true,
            'show-body-only' => false,
            'clean' => true,
            'output-xhtml' => true,
            'preserve-entities' => true 
    );
    if ($tidyConfig == null) {
        $tidyConfig = &$config;
    }
    $tidy = new tidy ();
    $out ['full'] = $tidy->repairString ( $string, $tidyConfig, 'UTF8' );
    unset ( $tidy );
    unset ( $tidyConfig );
    $out ['body'] = preg_replace ( "/.*<body[^>]*>|<\/body>.*/si", "", $out ['full'] );
    $out ['style'] = '<style type="text/css">' . preg_replace ( "/.*<style[^>]*>|<\/style>.*/si", "", $out ['full'] ) . '</style>';
    return ($out);
}

\================================================

Edit 1 : Dirty Hack (Non recommandé)

\================================================

D'après votre dernier commentaire, il semble que vous souhaitiez conserver le style d'amortissement HTML Tidy pourrait ne pas vous permettre de le faire puisque son depreciated mais vous pouvez faire ceci

$out = cleaning ( $code );
$getStyle = new css2string ();
$getStyle->parseStr ( $out ['style'] );
$body = $out ['body'];
$search = array ();
$replace = array ();

foreach ( $getStyle->css as $key => $value ) {
    list ( $selector, $name ) = explode ( ".", $key );
    $search [] = "<$selector class=\"$name\">";
    $style = array ();
    foreach ( $value as $type => $att ) {
        $style [] = "$type:$att";
    }
    $replace [] = "<$selector style=\"" . implode ( ";", $style ) . ";\">";
}

Sortie

<p>
  <strong>
      <span style="font-size:14px;">
        <span style="color:#006400;font-size:14px;">This is a</span>
        <span style="color:#006400;font-size:16px;">Test</span>
        </span>
  </strong>
</p>

Classe utilisée

//Credit : http://stackoverflow.com/a/8511837/1226894
class css2string {
var $css;

function parseStr($string) {
    preg_match_all ( '/(?ims)([a-z0-9, \s\.\:#_\-@]+)\{([^\}]*)\}/', $string, $arr );
    $this->css = array ();
    foreach ( $arr [0] as $i => $x ) {
        $selector = trim ( $arr [1] [$i] );
        $rules = explode ( ';', trim ( $arr [2] [$i] ) );
        $this->css [$selector] = array ();
        foreach ( $rules as $strRule ) {
            if (! empty ( $strRule )) {
                $rule = explode ( ":", $strRule );
                $this->css [$selector] [trim ( $rule [0] )] = trim ( $rule [1] );
            }
        }
    }
}

function arrayImplode($glue, $separator, $array) {
    if (! is_array ( $array ))
        return $array;
    $styleString = array ();
    foreach ( $array as $key => $val ) {
        if (is_array ( $val ))
            $val = implode ( ',', $val );
        $styleString [] = "{$key}{$glue}{$val}";

    }
    return implode ( $separator, $styleString );
}

function getSelector($selectorName) {
    return $this->arrayImplode ( ":", ";", $this->css [$selectorName] );
}

}

Answer 2

Vous devriez vous pencher sur HTMLPurifier Il s'agit d'un excellent outil pour analyser le langage HTML et en supprimer le contenu inutile et dangereux. Regardez dans les configurations de suppression des espaces vides et autres. J'admets qu'il peut être un peu difficile à configurer, mais c'est seulement parce qu'il est si polyvalent.

Il est aussi assez lourd, donc vous voudriez sauvegarder la sortie de celui-ci dans la base de données (par opposition à la lecture des données brutes de la base de données et ensuite l'analyse avec purifier à chaque fois.

Answer 3

Voici une solution qui utilise le navigateur pour obtenir les propriétés de l'élément imbriqué. Il n'est pas nécessaire de faire remonter les propriétés en cascade, puisque les styles calculés css sont prêts à être lus depuis le navigateur.

Voici un exemple : http://jsfiddle.net/mmeah/fUpe8/3/

var fixedCode = readNestProp($("#redo"));
$("#simp").html( fixedCode );

function readNestProp(el){
 var output = "";
 $(el).children().each( function(){
    if($(this).children().length==0){
        var _that=this;
        var _cssAttributeNames = ["font-size","color"];
        var _tag = $(_that).prop("nodeName").toLowerCase();
        var _text = $(_that).text();
        var _style = "";
        $.each(_cssAttributeNames, function(_index,_value){
            var css_value = $(_that).css(_value);
            if(typeof css_value!= "undefined"){
                _style += _value + ":";
                _style += css_value + ";";
            }
        });
        output += "<"+_tag+" style='"+_style+"'>"+_text+"</"+_tag+">";
    }else if(
        $(this).prop("nodeName").toLowerCase() !=
        $(this).find(">:first-child").prop("nodeName").toLowerCase()
    ){
        var _tag = $(this).prop("nodeName").toLowerCase();
        output += "<"+_tag+">" + readNestProp(this) + "</"+_tag+">";
    }else{
        output += readNestProp(this);
    };
 });
 return output;
}

Une meilleure solution que de taper tous les attributs css possibles comme :
var _cssAttributeNames = ["font-size", "color"] ;
est d'utiliser une solution comme celle mentionnée ici : JQuery peut-il obtenir tous les styles CSS associés à un élément ?

Answer 4

Je n'ai pas le temps de terminer ceci... peut-être que quelqu'un d'autre peut aider. Ce javascript supprime les balises en double exact et les balises non autorisées également...

Il y a quelques problèmes/choses à faire,
1) les balises régénérées doivent être fermées
2) il ne supprimera une balise que si le nom et les attributs de la balise sont identiques à ceux d'une autre balise parmi les enfants de ce nœud, donc il n'est pas assez "intelligent" pour supprimer toutes les balises inutiles.
3) il examinera les variables CSS autorisées et extraira TOUTES ces valeurs d'un élément, puis les écrira dans le HTML de sortie, par exemple :

var allowed_css = ["color","font-size"];
<span style="font-size: 12px"><span style="color: #123123">

Sera traduit en :

<span style="color:#000000;font-size:12px;"> <!-- inherited colour from parent -->
<span style="color:#123123;font-size:12px;"> <!-- inherited font-size from parent -->

---

Code :

<html>

<head>
<script type="text/javascript">
var allowed_css = ["font-size", "color"];
var allowed_tags = ["p","strong","span","br","b"];
function initialise() {
    var comment = document.getElementById("comment");
    var commentHTML = document.getElementById("commentHTML");
    var output = document.getElementById("output");
    var outputHTML = document.getElementById("outputHTML");
    print(commentHTML, comment.innerHTML, false);
    var out = getNodes(comment);
    print(output, out, true);
    print(outputHTML, out, false);
}
function print(out, stringCode, allowHTML) {
    out.innerHTML = allowHTML? stringCode : getHTMLCode(stringCode);
}
function getHTMLCode(stringCode) {
    return "<code>"+((stringCode).replace(/</g,"&lt;")).replace(/>/g,"&gt;")+"</code>";
}
function getNodes(elem) {
    var output = "";
    var nodesArr = new Array(elem.childNodes.length);
    for (var i=0; i<nodesArr.length; i++) {
        nodesArr[i] = new Array();
        nodesArr[i].push(elem.childNodes[i]);
        getChildNodes(elem.childNodes[i], nodesArr[i]);
        nodesArr[i] = removeDuplicates(nodesArr[i]);
        output += nodesArr[i].join("");
    }
    return output;
}
function removeDuplicates(arrayName) {
    var newArray = new Array();
    label:
    for (var i=0; i<arrayName.length; i++) {  
        for (var j=0; j<newArray.length; j++) {
            if(newArray[j]==arrayName[i])
                continue label;
        }
        newArray[newArray.length] = arrayName[i];
    }
    return newArray;
}
function getChildNodes(elemParent, nodesArr) {
    var children = elemParent.childNodes;
    for (var i=0; i<children.length; i++) {
        nodesArr.push(children[i]);
        if (children[i].hasChildNodes())
            getChildNodes(children[i], nodesArr);
    }
    return cleanHTML(nodesArr);
}
function cleanHTML(arr) {
    for (var i=0; i<arr.length; i++) {
        var elem = arr[i];
        if (elem.nodeType == 1) {
            if (tagNotAllowed(elem.nodeName)) {
                arr.splice(i,1);
                i--;
                continue;
            }
            elem = "<"+elem.nodeName+ getAttributes(elem) +">";
        }
        else if (elem.nodeType == 3) {
            elem = elem.nodeValue;
        }
        arr[i] = elem;
    }
    return arr;
}
function tagNotAllowed(tagName) {
    var allowed = " "+allowed_tags.join(" ").toUpperCase()+" ";
    if (allowed.search(" "+tagName.toUpperCase()+" ") == -1)
        return true;
    else
        return false;
}
function getAttributes(elem) {
    var attributes = "";
    for (var i=0; i<elem.attributes.length; i++) {
      var attrib = elem.attributes[i];
      if (attrib.specified == true) {
        if (attrib.name == "style") {
            attributes += " style=\""+getCSS(elem)+"\"";
        } else {
            attributes += " "+attrib.name+"=\""+attrib.value+"\"";
        }
      }
    }
    return attributes
}
function getCSS(elem) {
    var style="";
    if (elem.currentStyle) {
        for (var i=0; i<allowed_css.length; i++) {
            var styleProp = allowed_css[i];
            style += styleProp+":"+elem.currentStyle[styleProp]+";";
        }
    } else if (window.getComputedStyle) {
        for (var i=0; i<allowed_css.length; i++) {
            var styleProp = allowed_css[i];
            style += styleProp+":"+document.defaultView.getComputedStyle(elem,null).getPropertyValue(styleProp)+";";
        }
    }
    return style;
}
</script>
</head>

<body onload="initialise()">

<div style="float: left; width: 300px;">
<h2>Input</h2>
<div id="comment">
<p> 
 <strong> 
  <span style="font-size: 14px"> 
   <span style="color: #006400"> 
     <span style="font-size: 14px"> 
      <span style="font-size: 16px"> 
       <span style="color: #006400"> 
        <span style="font-size: 14px"> 
         <span style="font-size: 16px"> 
          <span style="color: #006400">This is a </span> 
         </span> 
        </span> 
       </span> 
      </span> 
     </span> 
    </span> 
    <span style="color: #006400"> 
     <span style="font-size: 16px"> 
      <span style="color: #b22222"><b>Test</b></span> 
     </span> 
    </span> 
   </span> 
  </span> 
 </strong> 
</p> 
<p>Second paragraph.
<span style="color: #006400">This is a span</span></p>
</div>
<h3>HTML code:</h3>
<div id="commentHTML"> </div>
</div>

<div style="float: left; width: 300px;">
<h2>Output</h2>
<div id="output"> </div>
<h3>HTML code:</h3>
<div id="outputHTML"> </div>
</div>

<div style="float: left; width: 300px;">
<h2>Tasks</h2>
<big>
<ul>
<li>Close Tags</li>
<li>Ignore inherited CSS style in method getCSS(elem)</li>
<li>Test with different input HTML</li>
</ul>
</big>
</div>

</body>

</html>

Answer 5

Cela ne répond peut-être pas exactement à votre problème, mais ce que j'aurais fait à votre place, c'est d'éliminer complètement toutes les balises HTML, en ne conservant que le texte de la douleur et les sauts de ligne.

Une fois cela fait, passez à markdown ou bbcode pour mieux formater vos commentaires. Un WYSIWYG est rarement utile.

La raison en est que vous avez dit que tout ce que vous aviez dans les commentaires était des données de présentation, ce qui, franchement, n'est pas très important.