24

I can convert JSON to HTML using JsontoHtml library. Now,I need to convert present HTML to JSON as shown in this site. When looked into the code I found the following script:

<script>
$(function(){

    //HTML to JSON
    $('#btn-render-json').click(function() {

        //Set html output
        $('#html-output').html( $('#html-input').val() );

        //Process to JSON and format it for consumption
        $('#html-json').html( FormatJSON(toTransform($('#html-output').children())) );
    });

});

//Convert obj or array to transform
function toTransform(obj) {

    var json;

    if( obj.length > 1 )
    {
        json = [];

        for(var i = 0; i < obj.length; i++)
            json[json.length++] = ObjToTransform(obj[i]);
    } else
        json = ObjToTransform(obj);

    return(json);
}

//Convert obj to transform
function ObjToTransform(obj)
{
    //Get the DOM element
    var el = $(obj).get(0);

    //Add the tag element
    var json = {'tag':el.nodeName.toLowerCase()};

    for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
        attr = attrs[i];
        json[attr.nodeName] = attr.value;
    }

    var children = $(obj).children();

    if( children.length > 0 ) json['children'] = [];
    else json['html'] = $(obj).text();

    //Add the children
    for(var c = 0; c < children.length; c++)
        json['children'][json['children'].length++] = toTransform(children[c]);

    return(json);
}

//Format JSON (with indents)
function FormatJSON(oData, sIndent) {
    if (arguments.length < 2) {
        var sIndent = "";
    }
    var sIndentStyle = "  ";
    var sDataType = RealTypeOf(oData);

    // open object
    if (sDataType == "array") {
        if (oData.length == 0) {
            return "[]";
        }
        var sHTML = "[";
    } else {
        var iCount = 0;
        $.each(oData, function() {
            iCount++;
            return;
        });
        if (iCount == 0) { // object is empty
            return "{}";
        }
        var sHTML = "{";
    }

    // loop through items
    var iCount = 0;
    $.each(oData, function(sKey, vValue) {
        if (iCount > 0) {
            sHTML += ",";
        }
        if (sDataType == "array") {
            sHTML += ("\n" + sIndent + sIndentStyle);
        } else {
            sHTML += ("\"" + sKey + "\"" + ":");
        }

        // display relevant data type
        switch (RealTypeOf(vValue)) {
            case "array":
            case "object":
                sHTML += FormatJSON(vValue, (sIndent + sIndentStyle));
                break;
            case "boolean":
            case "number":
                sHTML += vValue.toString();
                break;
            case "null":
                sHTML += "null";
                break;
            case "string":
                sHTML += ("\"" + vValue + "\"");
                break;
            default:
                sHTML += ("TYPEOF: " + typeof(vValue));
        }

        // loop
        iCount++;
    });

    // close object
    if (sDataType == "array") {
        sHTML += ("\n" + sIndent + "]");
    } else {
        sHTML += ("}");
    }

    // return
    return sHTML;
}

//Get the type of the obj (can replace by jquery type)
function RealTypeOf(v) {
  if (typeof(v) == "object") {
    if (v === null) return "null";
    if (v.constructor == (new Array).constructor) return "array";
    if (v.constructor == (new Date).constructor) return "date";
    if (v.constructor == (new RegExp).constructor) return "regex";
    return "object";
  }
  return typeof(v);
}
</script>

enter image description here

Now, I am in need of using the following function in PHP. I can get the HTML data. All what I needed now is to convert the JavaScript function to PHP function. Is this possible? My major doubts are as follows:

  • The primary input for the Javascript function toTransform() is an object. Is it possible to convert HTML to object via PHP?

  • Are all the functions present in this particular JavaScript available in PHP?

Please suggest me the idea.

When I tried to convert script tag to json as per the answer given, I get errors. When I tried it in json2html site, it showed like this:enter image description here .. How to achieve the same solution?

5
  • 1
    It is possible to convert. toTransform doesn't take a random object, it gets an array of the children in the html (maybe play around with the code and see what it puts in, what it spits out) etc. Converting this to PHP is your job though, not ours :) Commented Apr 14, 2014 at 14:22
  • @user3036342 Thanks for the suggestion. That input is what I am confused with. Is there any php function available for getting array of children in Html? I tried by typecasting it to object. But it didn't worked? Commented Apr 14, 2014 at 14:25
  • 2
    javascript has built in dom parsing, in php you could use domdocument php.net/manual/en/class.domdocument.php
    – Steve
    Commented Apr 14, 2014 at 14:26
  • 1
    @Ganesh Your problem is you are trying to convert it to an object for some reason, the input is an array. Do a alert() to check what JavaScript is actually sending through to those functions, you'll then be better equipped to make it return the same in your PHP version. As mentioned, you can use DomDocument. Look into a library called "PHPQuery". It's the PHP version of jQuery, and should help you with this a lot Commented Apr 14, 2014 at 14:30
  • 2
    Rather than searching for methods to convert html to json try for xml to json. You can use this stackoverflow.com/questions/8830599/php-convert-xml-to-json Commented Apr 14, 2014 at 14:40

3 Answers 3

41

If you are able to obtain a DOMDocument object representing your HTML, then you just need to traverse it recursively and construct the data structure that you want.

Converting your HTML document into a DOMDocument should be as simple as this:

function html_to_obj($html) {
    $dom = new DOMDocument();
    $dom->loadHTML($html);
    return element_to_obj($dom->documentElement);
}

Then, a simple traversal of $dom->documentElement which gives the kind of structure you described could look like this:

function element_to_obj($element) {
    $obj = array( "tag" => $element->tagName );
    foreach ($element->attributes as $attribute) {
        $obj[$attribute->name] = $attribute->value;
    }
    foreach ($element->childNodes as $subElement) {
        if ($subElement->nodeType == XML_TEXT_NODE) {
            $obj["html"] = $subElement->wholeText;
        }
        else {
            $obj["children"][] = element_to_obj($subElement);
        }
    }
    return $obj;
}

Test case

$html = <<<EOF
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> This is a test </title>
    </head>
    <body>
        <h1> Is this working? </h1>  
        <ul>
            <li> Yes </li>
            <li> No </li>
        </ul>
    </body>
</html>

EOF;

header("Content-Type: text/plain");
echo json_encode(html_to_obj($html), JSON_PRETTY_PRINT);

Output

{
    "tag": "html",
    "lang": "en",
    "children": [
        {
            "tag": "head",
            "children": [
                {
                    "tag": "title",
                    "html": " This is a test "
                }
            ]
        },
        {
            "tag": "body",
            "html": "  \n        ",
            "children": [
                {
                    "tag": "h1",
                    "html": " Is this working? "
                },
                {
                    "tag": "ul",
                    "children": [
                        {
                            "tag": "li",
                            "html": " Yes "
                        },
                        {
                            "tag": "li",
                            "html": " No "
                        }
                    ],
                    "html": "\n        "
                }
            ]
        }
    ]
}

Answer to updated question

The solution proposed above does not work with the <script> element, because it is parsed not as a DOMText, but as a DOMCharacterData object. This is because the DOM extension in PHP is based on libxml2, which parses your HTML as HTML 4.0, and in HTML 4.0 the content of <script> is of type CDATA and not #PCDATA.

You have two solutions for this problem.

  1. The simple but not very robust solution would be to add the LIBXML_NOCDATA flag to DOMDocument::loadHTML. (I am not actually 100% sure whether this works for the HTML parser.)

  2. The more difficult but, in my opinion, better solution, is to add an additonal test when you are testing $subElement->nodeType before the recursion. The recursive function would become:

function element_to_obj($element) {
    echo $element->tagName, "\n";
    $obj = array( "tag" => $element->tagName );
    foreach ($element->attributes as $attribute) {
        $obj[$attribute->name] = $attribute->value;
    }
    foreach ($element->childNodes as $subElement) {
        if ($subElement->nodeType == XML_TEXT_NODE) {
            $obj["html"] = $subElement->wholeText;
        }
        elseif ($subElement->nodeType == XML_CDATA_SECTION_NODE) {
            $obj["html"] = $subElement->data;
        }
        else {
            $obj["children"][] = element_to_obj($subElement);
        }
    }
    return $obj;
}

If you hit on another bug of this type, the first thing you should do is check the type of node $subElement is, because there exists many other possibilities my short example function did not deal with.

Additionally, you will notice that libxml2 has to fix mistakes in your HTML in order to be able to build a DOM for it. This is why an <html> and a <head> elements will appear even if you don't specify them. You can avoid this by using the LIBXML_HTML_NOIMPLIED flag.

Test case with script

$html = <<<EOF
        <script type="text/javascript">
            alert('hi');
        </script>
EOF;

header("Content-Type: text/plain");
echo json_encode(html_to_obj($html), JSON_PRETTY_PRINT);

Output

{
    "tag": "html",
    "children": [
        {
            "tag": "head",
            "children": [
                {
                    "tag": "script",
                    "type": "text\/javascript",
                    "html": "\n            alert('hi');\n        "
                }
            ]
        }
    ]
}
5
  • Thank you very much for the solution. I tried your answer for the script tag along with html. It worked for all html tags. But I got error with script part. It didn't even work with script tag. I tried with script tag in json2html site. I have updated my question with the output expected along with script tag. Can you please suggest me the solution? Commented May 2, 2014 at 13:23
  • I have modified the answer to account for elements with CDATA content type.
    – scozy
    Commented May 2, 2014 at 14:10
  • You just saved my skin there. Need to format raw html into a set of objects for converting to pdf. Imagine parsing that by hand!
    – eggmatters
    Commented Feb 23, 2015 at 23:58
  • Hi @scozy, great answer. Can you please tell how I can convert the same JSON format back into HTML in java (android app)?
    – dejavu89
    Commented Nov 24, 2015 at 20:18
  • If, for example, you parse <div> xxx <div> yyy </div> zzz </div>, the xxx won't end up in the json, as it will be overwritten by zzz since there is only one $obj["html"] on that level. I add texts to the children array as well, and it works like a charm. Thanks!
    – JanP
    Commented Dec 8, 2019 at 20:19
1

I assume that your html string is stored in $html variable. So you should do:

$dom = new DOMDocument();
$dom->loadHTML($html);

foreach($dom->getElementsByTagName('*') as $el){
    $result[] = ["type" => $el->tagName, "value" => $el->nodeValue];
}

$json = json_encode($result, JSON_UNESCAPED_UNICODE);

Note: This algorithm doesn't support parent-child tags and fetch all tags as parent elements and parses all of them in a sorted queue. Of course, you can implement this feature by studying the DOMDocument classes features.

0

I wrote this to convert HTML Form tags to a JSON object. You may be able to build off of this.

class HtmlToJson {
    public $html;
    public $filter;

    function __construct($html, $filter) {
        $this->dom = new DOMDocument();
        $this->dom->loadHTML( $html );
        $this->jsonObj = array('form_tag_attrs'=>array(), 'form_values'=>array());
        $this->filter = $filter;
    }

    function recursivePair($element, $tagName) {
        if ( isset( $element->attributes ) ) {
            $nameAttr = $element->getAttribute('name');

            if ($nameAttr) {
                $this->jsonObj['form_values'][$nameAttr] = $element->getAttribute('value');
            }

            if ($element->nodeName === $tagName) {
                foreach ( $element->attributes as $attribute ) {
                    $this->jsonObj['form_tag_attrs'][ $attribute->name ] = $attribute->value;
                }
            }
        }

        if ( isset( $element->childNodes ) ) {
            foreach ( $element->childNodes as $subElement ) {
                $this->recursivePair( $subElement, $tagName );
            }
        }
    }

    function json() {
        $element = ($this->filter ? $this->dom->getElementsByTagName($this->filter)->item(0) : $this->dom->documentElement);

        $this->recursivePair($element, $this->filter);

        return $this->jsonObj;
    }
}

$formJson = new HtmlToJson($curlResult, 'form');

echo json_encode($formJson->json());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.