73

構造をそのままにして、HTMLをJSONにマップしようとしています。これを行うライブラリはありますか、それとも自分で作成する必要がありますか? そこに html2json ライブラリがない場合は、xml2json ライブラリを最初に使用できると思います。結局のところ、html は xml のバリアントにすぎません。

更新：わかりました、おそらく例を挙げるべきです。私がやろうとしていることは次のとおりです。html の文字列を解析します。

<div>
  <span>text</span>Text2
</div>

次のように json オブジェクトに変換します。

{
  "type" : "div",
  "content" : [
    {
      "type" : "span",
      "content" : [
        "Text2"
      ]
    },
    "Text2"
  ]
}

注: タグに気付かなかった場合のために、Javascript で解決策を探しています。

4

5 に答える 5

86

私はあなたが望むことをするこの関数を書きました。試してみて、正しく動作しない場合はお知らせください:

// Test with an element.
var initElement = document.getElementsByTagName("html")[0];
var json = mapDOM(initElement, true);
console.log(json);

// Test with a string.
initElement = "<div><span>text</span>Text2</div>";
json = mapDOM(initElement, true);
console.log(json);

function mapDOM(element, json) {
    var treeObject = {};
    
    // If string convert to document Node
    if (typeof element === "string") {
        if (window.DOMParser) {
              parser = new DOMParser();
              docNode = parser.parseFromString(element,"text/xml");
        } else { // Microsoft strikes again
              docNode = new ActiveXObject("Microsoft.XMLDOM");
              docNode.async = false;
              docNode.loadXML(element); 
        } 
        element = docNode.firstChild;
    }
    
    //Recursively loop through DOM elements and assign properties to object
    function treeHTML(element, object) {
        object["type"] = element.nodeName;
        var nodeList = element.childNodes;
        if (nodeList != null) {
            if (nodeList.length) {
                object["content"] = [];
                for (var i = 0; i < nodeList.length; i++) {
                    if (nodeList[i].nodeType == 3) {
                        object["content"].push(nodeList[i].nodeValue);
                    } else {
                        object["content"].push({});
                        treeHTML(nodeList[i], object["content"][object["content"].length -1]);
                    }
                }
            }
        }
        if (element.attributes != null) {
            if (element.attributes.length) {
                object["attributes"] = {};
                for (var i = 0; i < element.attributes.length; i++) {
                    object["attributes"][element.attributes[i].nodeName] = element.attributes[i].nodeValue;
                }
            }
        }
    }
    treeHTML(element, treeObject);
    
    return (json) ? JSON.stringify(treeObject) : treeObject;
}

実際の例: http://jsfiddle.net/JUSsf/ (Chrome でテスト済み。ブラウザの完全なサポートは保証できません。これをテストする必要があります)。

要求された形式で HTML ページのツリー構造を含むオブジェクトを作成し、JSON.stringify()最新のブラウザー (IE8+、Firefox 3+ など) に含まれているオブジェクトを使用します。古いブラウザーをサポートする必要がある場合は、json2.jsを含めることができます。

DOM 要素またはstring有効な XHTML を含む要素のいずれかを引数として取ることができます (DOMParser()設定されていると、特定の状況で が停止するのか、"text/xml"エラー処理を提供しないだけなのかはわかりません。残念ながら"text/html"、ブラウザのサポート）。

として別の値を渡すことで、この関数の範囲を簡単に変更できますelement。渡す値は、JSON マップのルートになります。

于 2012-10-20T00:19:46.130 に答える
1

ExtJSの完全なフレームワーク自体がJSONであると読んでいるときに、リンクをいくつか取得しました。

http://www.thomasfrank.se/xml_to_json.html

http://camel.apache.org/xmljson.html

オンラインXMLからJSONへのコンバーター：http：//jsontoxml.utilities-online.info/

更新 ところで、問題のJSONを追加するには、HTMLにこのようにタイプタグとコンテンツタグを含める必要があります。または、JSON変換中にこれらの要素を追加するためにxslt変換を使用する必要があります。

<?xml version="1.0" encoding="UTF-8" ?>
<type>div</type>
<content>
    <type>span</type>
    <content>Text2</content>
</content>
<content>Text2</content>
于 2012-10-19T19:19:06.060 に答える