blocks|key|207631|text|当我读到JSON框架本身就是ExtJS时，我得到的链接很少。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|207632|http://www.thomasfrank.se/xml_to_json.html|offset|length|207633|http://camel.apache.org/xmljson.html|207634|在线XML转换器：http://jsontoxml.utilities-online.info/|207635|更新JSON，为了获得所添加的，HTML中也需要有类型和内容标签，或者您需要在执行JSON转换时使用一些xslt转换来添加这些元素|style|BOLD|207636|<?xml+version="1.0"+encoding="UTF-8"+?>
<type>div</type>
<content>
++++<type>span</type>
++++<content>Text2</content>
</content>
<content>Text2</content>|code-block|syntax|javascript|207637|entityMap|0|LINK|mutability|MUTABLE|url|1|2|http://jsontoxml.utilities-online.info/^0|0|0|16|0|0|0|10|1|0|9|13|2|0|0|F|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|J|3|K|5|6|7|1F|8|@$D|1G|E|1H|L|M]]|9|@]|A|$]]|$1|N|3|O|5|P|7|1I|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]|Z|$5|V|W|X|A|$Y|G]]|10|$5|V|W|X|A|$Y|11]]]]

<p>I got few links sometime back while reading on ExtJS full framework in itself is JSON.</p>

<p><a href="http://www.thomasfrank.se/xml_to_json.html" rel="nofollow">http://www.thomasfrank.se/xml_to_json.html</a></p>

<p><a href="http://camel.apache.org/xmljson.html" rel="nofollow">http://camel.apache.org/xmljson.html</a></p>

<p>online XML to JSON converter : <a href="http://jsontoxml.utilities-online.info/" rel="nofollow">http://jsontoxml.utilities-online.info/</a></p>

<p><strong>UPDATE</strong>
BTW, To get JSON as added in question, HTML need to have type &amp; content tags in it too like this or you need to use some xslt transformation to add these elements while doing JSON conversion</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
&lt;type&gt;div&lt;/type&gt;
&lt;content&gt;
    &lt;type&gt;span&lt;/type&gt;
    &lt;content&gt;Text2&lt;/content&gt;
&lt;/content&gt;
&lt;content&gt;Text2&lt;/content&gt;
</code></pre>


blocks|key|210330|text|我刚刚写了这个函数，它可以做你想做的事情；试一下，如果它不能为你正确工作，告诉我：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|210331|//+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%2B%2B)+{
++++++++++++++++++++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%2B%2B)+{
++++++++++++++++++++object["attributes"][element.attributes[i].nodeName]+=+element.attributes[i].nodeValue;
++++++++++++++++}
++++++++++++}
++++++++}
++++}
++++treeHTML(element,+treeObject);
++++
++++return+(json)+?+JSON.stringify(treeObject)+:+treeObject;
}|code-block|syntax|javascript|210332|工作示例：http://jsfiddle.net/JUSsf/+(在Chrome上测试过，我不能保证完全支持浏览器--你必须对此进行测试)。|offset|length|210333|它创建一个对象，其中包含您要求的格式的超文本标记语言页面的树形结构，然后使用JSON.stringify()，这是包括在大多数现代浏览器(IE8%2B，火狐3%2B+.etc)；如果你需要支持旧的浏览器，你可以包括json2.js。|style|CODE|210334|它可以接受DOM元素或包含有效XHTML的string作为参数(我相信，我不确定DOMParser()在某些情况下是否会阻塞，因为它被设置为"text/xml"，或者它只是不提供错误处理。不幸的是，"text/html"对浏览器的支持很差)。|210335|通过将不同的值作为element传递，可以很容易地更改此函数的范围。您传递的任何值都将是JSON映射的根。|210336|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/JUSsf/|1|http://www.json.org/js.html^0|0|0|5|Q|0|0|12|G|2V|8|1|0|L|6|14|B|1Y|A|2R|B|0|9|7|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|L|5|6|7|18|8|@$I|19|J|1A|M|N]]|9|@$I|1B|J|1C|1|1D]]|A|$]]|$1|O|3|P|5|6|7|1E|8|@$I|1F|J|1G|M|N]|$I|1H|J|1I|M|N]|$I|1J|J|1K|M|N]|$I|1L|J|1M|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@$I|1O|J|1P|M|N]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>I just wrote this function that does what you want; try it out let me know if it doesn't work correctly for you:</p>
<pre><code>// Test with an element.
var initElement = document.getElementsByTagName(&quot;html&quot;)[0];
var json = mapDOM(initElement, true);
console.log(json);

// Test with a string.
initElement = &quot;&lt;div&gt;&lt;span&gt;text&lt;/span&gt;Text2&lt;/div&gt;&quot;;
json = mapDOM(initElement, true);
console.log(json);

function mapDOM(element, json) {
    var treeObject = {};
    
    // If string convert to document Node
    if (typeof element === &quot;string&quot;) {
        if (window.DOMParser) {
              parser = new DOMParser();
              docNode = parser.parseFromString(element,&quot;text/xml&quot;);
        } else { // Microsoft strikes again
              docNode = new ActiveXObject(&quot;Microsoft.XMLDOM&quot;);
              docNode.async = false;
              docNode.loadXML(element); 
        } 
        element = docNode.firstChild;
    }
    
    //Recursively loop through DOM elements and assign properties to object
    function treeHTML(element, object) {
        object[&quot;type&quot;] = element.nodeName;
        var nodeList = element.childNodes;
        if (nodeList != null) {
            if (nodeList.length) {
                object[&quot;content&quot;] = [];
                for (var i = 0; i &lt; nodeList.length; i++) {
                    if (nodeList[i].nodeType == 3) {
                        object[&quot;content&quot;].push(nodeList[i].nodeValue);
                    } else {
                        object[&quot;content&quot;].push({});
                        treeHTML(nodeList[i], object[&quot;content&quot;][object[&quot;content&quot;].length -1]);
                    }
                }
            }
        }
        if (element.attributes != null) {
            if (element.attributes.length) {
                object[&quot;attributes&quot;] = {};
                for (var i = 0; i &lt; element.attributes.length; i++) {
                    object[&quot;attributes&quot;][element.attributes[i].nodeName] = element.attributes[i].nodeValue;
                }
            }
        }
    }
    treeHTML(element, treeObject);
    
    return (json) ? JSON.stringify(treeObject) : treeObject;
}
</code></pre>
<p>Working example: <a href="http://jsfiddle.net/JUSsf/" rel="noreferrer">http://jsfiddle.net/JUSsf/</a> (Tested in Chrome, I can't guarantee full browser support - you will have to test this).</p>
<p>​It creates an object that contains the tree structure of the HTML page in the format you requested and then uses <code>JSON.stringify()</code> which is included in most modern browsers (IE8+, Firefox 3+ .etc); If you need to support older browsers you can include <a href="http://www.json.org/js.html" rel="noreferrer">json2.js</a>.</p>
<p>It can take either a DOM element or a <code>string</code> containing valid XHTML as an argument (I believe, I'm not sure whether the <code>DOMParser()</code> will choke in certain situations as it is set to <code>&quot;text/xml&quot;</code> or whether it just doesn't provide error handling. Unfortunately <code>&quot;text/html&quot;</code> has poor browser support).</p>
<p>You can easily change the range of this function by passing a different value as <code>element</code>. Whatever value you pass will be the root of your JSON map.</p>


blocks|key|211821|text|表示复杂的HTML文档将是困难的，并且充满了转折点，但我只想分享几个技术来展示如何启动这类程序。这个答案的不同之处在于它使用数据抽象和toJSON方法来递归地构建结果|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|211822|下面，html2json是一个很小的函数，它接受一个HTML节点作为输入，并返回一个JSON字符串作为结果。特别要注意代码是如何相当扁平的，但它仍然有足够的能力构建深度嵌套的树结构-所有这些都可以以几乎零的复杂性实现|211823|​|211824|//+data+Elem+=+Elem+Node

const+Elem+=+e+=>+({
++toJSON+:+()+=>+({
++++tagName:+
++++++e.tagName,
++++textContent:
++++++e.textContent,
++++attributes:
++++++Array.from(e.attributes,+({name,+value})+=>+[name,+value]),
++++children:
++++++Array.from(e.children,+Elem)
++})
})

//+html2json+::+Node+->+JSONString
const+html2json+=+e+=>
++JSON.stringify(Elem(e),+null,+'++')
++
console.log(html2json(document.querySelector('main')))|code-block|syntax|javascript|211825|<main>
++<h1+class="mainHeading">Some+heading</h1>
++<ul+id="menu">
++++<li><a+href="/a">a</a></li>
++++<li><a+href="/b">b</a></li>
++++<li><a+href="/c">c</a></li>
++</ul>
++<p>some+text</p>
</main>|211826|211827|在前面的示例中，textContent有点被破坏了。为了解决这个问题，我们引入了另一个数据构造函数TextElem。我们必须在childNodes+(而不是children)上进行映射，并选择基于e.nodeType返回正确的数据类型-这使我们更接近我们可能需要的数据类型|211828|211829|//+data+Elem+=+Elem+Node+%7C+TextElem+Node

const+TextElem+=+e+=>+({
++toJSON:+()+=>+({
++++type:
++++++'TextElem',
++++textContent:
++++++e.textContent
++})
})

const+Elem+=+e+=>+({
++toJSON+:+()+=>+({
++++type:
++++++'Elem',
++++tagName:+
++++++e.tagName,
++++attributes:
++++++Array.from(e.attributes,+({name,+value})+=>+[name,+value]),
++++children:
++++++Array.from(e.childNodes,+fromNode)
++})
})

//+fromNode+::+Node+->+Elem
const+fromNode+=+e+=>+{
++switch+(e.nodeType)+{
++++case+3:++return+TextElem(e)
++++default:+return+Elem(e)
++}
}

//+html2json+::+Node+->+JSONString
const+html2json+=+e+=>
++JSON.stringify(Elem(e),+null,+'++')
++
console.log(html2json(document.querySelector('main')))|211830|<main>
++<h1+class="mainHeading">Some+heading</h1>
++<ul+id="menu">
++++<li><a+href="/a">a</a></li>
++++<li><a+href="/b">b</a></li>
++++<li><a+href="/c">c</a></li>
++</ul>
++<p>some+text</p>
</main>|211831|211832|无论如何，这只是问题的两次迭代。当然，您必须解决出现的特殊情况，但是这种方法的好处是，它为您提供了很大的灵活性，可以在JSON中以您希望的方式对HTML进行编码-而不会引入太多的复杂性|211833|根据我的经验，你可以继续使用这种技术进行迭代，并获得非常好的结果。如果有人对这个答案感兴趣，并希望我对任何东西进行扩展，请让我知道%5E_%5E|211834|相关：Recursive+methods+using+JavaScript:+building+your+own+version+of+JSON.stringify|211835|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/42690135/633183^0|1V|6|0|3|9|0|0|0|0|0|8|B|1D|8|1R|A|26|8|2Q|A|0|0|0|0|0|0|0|3|27|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1J|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1K|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1L|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1M|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|T|3|I|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1Z|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|L|7|20|8|@]|D|@]|E|$M|N]]|$1|Y|3|I|5|6|7|21|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|22|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|23|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|24|8|@]|D|@$9|25|A|26|1|27]]|E|$]]|$1|15|3|-4|5|6|7|28|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]]]

<p>Representing complex HTML documents will be difficult and full of corner cases, but I just wanted to share a couple techniques to show how to get this kind of program started. This answer differs in that it uses data abstraction and the <code>toJSON</code> method to recursively build the result </p>

<p>Below, <code>html2json</code> is a <em>tiny</em> function which takes an HTML node as input and it returns a JSON string as the result. Pay particular attention to how the code is quite flat but it's still plenty capable of building a deeply nested tree structure – all possible with virtually zero complexity</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// data Elem = Elem Node

const Elem = e =&gt; ({
  toJSON : () =&gt; ({
    tagName: 
      e.tagName,
    textContent:
      e.textContent,
    attributes:
      Array.from(e.attributes, ({name, value}) =&gt; [name, value]),
    children:
      Array.from(e.children, Elem)
  })
})

// html2json :: Node -&gt; JSONString
const html2json = e =&gt;
  JSON.stringify(Elem(e), null, '  ')
  
console.log(html2json(document.querySelector('main')))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
  &lt;h1 class="mainHeading"&gt;Some heading&lt;/h1&gt;
  &lt;ul id="menu"&gt;
    &lt;li&gt;&lt;a href="/a"&gt;a&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/b"&gt;b&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/c"&gt;c&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;some text&lt;/p&gt;
&lt;/main&gt;</code></pre>
</div>
</div>
</p>

<p>In the previous example, the <code>textContent</code> gets a little butchered. To remedy this, we introduce another data constructor, <code>TextElem</code>. We'll have to map over the <code>childNodes</code> (instead of <code>children</code>) and choose to return the correct data type based on <code>e.nodeType</code> – this gets us a littler closer to what we might need</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// data Elem = Elem Node | TextElem Node

const TextElem = e =&gt; ({
  toJSON: () =&gt; ({
    type:
      'TextElem',
    textContent:
      e.textContent
  })
})

const Elem = e =&gt; ({
  toJSON : () =&gt; ({
    type:
      'Elem',
    tagName: 
      e.tagName,
    attributes:
      Array.from(e.attributes, ({name, value}) =&gt; [name, value]),
    children:
      Array.from(e.childNodes, fromNode)
  })
})

// fromNode :: Node -&gt; Elem
const fromNode = e =&gt; {
  switch (e.nodeType) {
    case 3:  return TextElem(e)
    default: return Elem(e)
  }
}

// html2json :: Node -&gt; JSONString
const html2json = e =&gt;
  JSON.stringify(Elem(e), null, '  ')
  
console.log(html2json(document.querySelector('main')))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
  &lt;h1 class="mainHeading"&gt;Some heading&lt;/h1&gt;
  &lt;ul id="menu"&gt;
    &lt;li&gt;&lt;a href="/a"&gt;a&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/b"&gt;b&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/c"&gt;c&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;some text&lt;/p&gt;
&lt;/main&gt;</code></pre>
</div>
</div>
</p>

<p>Anyway, that's just two iterations on the problem. Of course you'll have to address corner cases where they come up, but what's nice about this approach is that it gives you a lot of flexibility to encode the HTML however you wish in JSON – <em>and</em> without introducing too much complexity</p>

<p>In my experience, you could keep iterating with this technique and achieve really good results. If this answer is interesting to anyone and would like me to expand upon anything, let me know ^_^</p>

<p>Related: <a href="https://stackoverflow.com/a/42690135/633183">Recursive methods using JavaScript: building your own version of JSON.stringify</a></p>


blocks|key|207676|text|谢谢你@Gorge+Reith。在@George+Reith提供的解决方案的基础上，这里有一个进一步的函数，它(1)分离出单独的‘href’链接(因为它们可能有用)，(2)使用属性作为键(因为属性更具描述性)，(3)通过使用'jsdom‘包，它可以在Node.js中使用，而不需要Chrome：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|207677|const+jsdom+=+require('jsdom')+//+npm+install+jsdom+provides+in-built+Window.js+without+needing+Chrome


//+Function+to+map+HTML+DOM+attributes+to+inner+text+and+hrefs
function+mapDOM(html_string,+json)+{
++++treeObject+=+{}

++++//+IMPT:+use+jsdom+because+of+in-built+Window.js
++++//+DOMParser()+does+not+provide+client-side+window+for+element+access+if+coding+in+Nodejs
++++dom+=+new+jsdom.JSDOM(html_string)
++++document+=+dom.window.document
++++element+=+document.firstChild

++++//+Recursively+loop+through+DOM+elements+and+assign+attributes+to+inner+text+object
++++//+Why+attributes+instead+of+elements?+1.+attributes+more+descriptive,+2.+usually+important+and+lesser
++++function+treeHTML(element,+object)+{
++++++++var+nodeList+=+element.childNodes;
++++++++if+(nodeList+!=+null)+{
+++++++++++if+(nodeList.length)+{
+++++++++++++++object[element.nodeName]+=+[]++//+IMPT:+empty+[]+array+for+non-text+recursivable+elements+(see+below)
+++++++++++++++for+(var+i+=+0;+i+<+nodeList.length;+i%2B%2B)+{
+++++++++++++++++++//+if+final+text
+++++++++++++++++++if+(nodeList[i].nodeType+==+3)+{
+++++++++++++++++++++++if+(element.attributes+!=+null)+{
+++++++++++++++++++++++++++for+(var+j+=+0;+j+<+element.attributes.length;+j%2B%2B)+{
++++++++++++++++++++++++++++++++if+(element.attributes[j].nodeValue+!==+''+&&+
++++++++++++++++++++++++++++++++++++nodeList[i].nodeValue+!==+'')+{
++++++++++++++++++++++++++++++++++++if+(element.attributes[j].name+===+'href')+{+//+separate+href
++++++++++++++++++++++++++++++++++++++++object[element.attributes[j].name]+=+element.attributes[j].nodeValue;
++++++++++++++++++++++++++++++++++++}+else+{
++++++++++++++++++++++++++++++++++++++++object[element.attributes[j].nodeValue]+=+nodeList[i].nodeValue;
++++++++++++++++++++++++++++++++++++}

++++++++++++++++++++++++++++++++}
+++++++++++++++++++++++++++}
+++++++++++++++++++++++}
+++++++++++++++++++//+else+if+non-text+then+recurse+on+recursivable+elements
+++++++++++++++++++}+else+{
+++++++++++++++++++++++object[element.nodeName].push({});+//+if+non-text+push+{}+into+empty+[]+array
+++++++++++++++++++++++treeHTML(nodeList[i],+object[element.nodeName][object[element.nodeName].length+-1]);
+++++++++++++++++++}
+++++++++++++++}
+++++++++++}
++++++++}
++++}
++++treeHTML(element,+treeObject);

++++return+(json)+?+JSON.stringify(treeObject)+:+treeObject;
}|code-block|syntax|javascript|207678|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Thank you @Gorge Reith. Working off the solution provided by @George Reith, here is a function that furthers (1) separates out the individual 'hrefs' links (because they might be useful), (2) uses attributes as keys (since attributes are more descriptive), and (3) it's usable within Node.js without needing Chrome by using the 'jsdom' package:</p>

<pre><code>const jsdom = require('jsdom') // npm install jsdom provides in-built Window.js without needing Chrome


// Function to map HTML DOM attributes to inner text and hrefs
function mapDOM(html_string, json) {
    treeObject = {}

    // IMPT: use jsdom because of in-built Window.js
    // DOMParser() does not provide client-side window for element access if coding in Nodejs
    dom = new jsdom.JSDOM(html_string)
    document = dom.window.document
    element = document.firstChild

    // Recursively loop through DOM elements and assign attributes to inner text object
    // Why attributes instead of elements? 1. attributes more descriptive, 2. usually important and lesser
    function treeHTML(element, object) {
        var nodeList = element.childNodes;
        if (nodeList != null) {
           if (nodeList.length) {
               object[element.nodeName] = []  // IMPT: empty [] array for non-text recursivable elements (see below)
               for (var i = 0; i &lt; nodeList.length; i++) {
                   // if final text
                   if (nodeList[i].nodeType == 3) {
                       if (element.attributes != null) {
                           for (var j = 0; j &lt; element.attributes.length; j++) {
                                if (element.attributes[j].nodeValue !== '' &amp;&amp; 
                                    nodeList[i].nodeValue !== '') {
                                    if (element.attributes[j].name === 'href') { // separate href
                                        object[element.attributes[j].name] = element.attributes[j].nodeValue;
                                    } else {
                                        object[element.attributes[j].nodeValue] = nodeList[i].nodeValue;
                                    }

                                }
                           }
                       }
                   // else if non-text then recurse on recursivable elements
                   } else {
                       object[element.nodeName].push({}); // if non-text push {} into empty [] array
                       treeHTML(nodeList[i], object[element.nodeName][object[element.nodeName].length -1]);
                   }
               }
           }
        }
    }
    treeHTML(element, treeObject);

    return (json) ? JSON.stringify(treeObject) : treeObject;
}
</code></pre>


blocks|key|3062986|text|我遇到了一个类似的问题，我想用以下方式将HTML表示为JSON：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3062987|对于HTML文本节点，请使用string|offset|length|style|CODE|3062988|For+HTML元素，使用带有以下参数的数组：|unordered-list-item|3062989|3062990|3062991|+an+object元素的(标记)名称，将属性键映射到属性值|3062992|(内联)列表的子项|3062993|3062994|3062995|​|3062996|示例：|3062997|<div>
++<span>text</span>Text2
</div>|code-block|syntax|javascript|3062998|变成了|3062999|[
+++'div',
+++{},
+++['span',+{},+'text'],
+++'Text2'
]|3063000|3063001|我编写了一个函数，用于将DOM元素转换为这种JS结构。你可以在这个答案的末尾找到这个函数。函数是用Typescript编写的。您可以使用Typescript+playground将其转换为干净的JavaScript。|3063002|3063003|此外，如果需要将html字符串解析为DOM，则将其赋值为.innerHtml|3063004|let+element+=+document.createElement('div')
element.innerHtml+=+htmlString|3063005|3063006|此外，这也是常识，但如果需要JSON字符串输出，请使用JSON.stringify。|3063007|3063008|/**
+*+A+NodeDescriptor+stands+for+either+an+(HTML)+Element,+or+for+a+text+node
+*/
export+type+NodeDescriptor+=+ElementDescriptor+%7C+string

/**
+*+Array+representing+an+HTML+Element.+It+consists+of:
+*
+*+-+The+(tag)+name+of+the+element
+*+-+An+object,+mapping+attribute+keys+to+attribute+values
+*+-+The+(inlined)+list+of+children+nodes
+*/
export+type+ElementDescriptor+=+[
+++string,
+++Record<string,+string>,
+++...NodeDescriptor[]
]

export+let+htmlToJs+=+(element:+Element,+trim+=+true):+ElementDescriptor+=>+{
+++let+convertElement+=+(element:+Element):+ElementDescriptor+=>+{
++++++let+attributeObject:+Record<string,+string>+=+{}
++++++for+(let+{+name,+value+}+of+element.attributes)+{
+++++++++attributeObject[name]+=+value
++++++}

++++++let+childArray:+NodeDescriptor[]+=+[]
++++++for+(let+node+of+element.childNodes)+{
+++++++++let+converter+=+htmlToJsDispatch[node.nodeType]
+++++++++if+(converter)+{
++++++++++++let+descriptor+=+converter(node+as+any)
++++++++++++let+skip+=+false

++++++++++++if+(trim+&&+typeof+descriptor+===+'string')+{
+++++++++++++++descriptor+=+descriptor.trim()
+++++++++++++++if+(descriptor+===+'')+skip+=+true
++++++++++++}

++++++++++++if+(!skip)+childArray.push(descriptor)
+++++++++}
++++++}

++++++return+[element.tagName.toLowerCase(),+attributeObject,+...childArray]
+++}

+++let+htmlToJsDispatch+=+{
++++++[element.ELEMENT_NODE]:+convertElement,
++++++[element.TEXT_NODE]:+(node:+Text):+string+=>+node.data,
+++}

+++return+convertElement(element)
}|3063009|entityMap|0|LINK|mutability|MUTABLE|url|https://www.typescriptlang.org/play|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify^0|0|E|6|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1W|L|0|0|0|S|A|0|0|0|R|E|R|E|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1U|8|@$D|1V|E|1W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1X|8|@]|9|@]|A|$]]|$1|K|3|-4|5|J|7|1Y|8|@]|9|@]|A|$]]|$1|L|3|-4|5|J|7|1Z|8|@]|9|@]|A|$]]|$1|M|3|N|5|J|7|20|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|21|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|24|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|25|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|26|8|@]|9|@]|A|$Z|10]]|$1|11|3|12|5|6|7|27|8|@]|9|@]|A|$]]|$1|13|3|14|5|Y|7|28|8|@]|9|@]|A|$Z|10]]|$1|15|3|-4|5|6|7|29|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2A|8|@]|9|@$D|2B|E|2C|1|2D]]|A|$]]|$1|18|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2F|8|@$D|2G|E|2H|F|G]]|9|@]|A|$]]|$1|1B|3|1C|5|Y|7|2I|8|@]|9|@]|A|$Z|10]]|$1|1D|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2K|8|@$D|2L|E|2M|F|G]]|9|@$D|2N|E|2O|1|2P]]|A|$]]|$1|1G|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|Y|7|2R|8|@]|9|@]|A|$Z|10]]|$1|1J|3|-4|5|6|7|2S|8|@]|9|@]|A|$]]]|1K|$1L|$5|1M|1N|1O|A|$1P|1Q]]|1R|$5|1M|1N|1O|A|$1P|1S]]]]

<p>I had a similar issue where I wanted to represent HTML as JSON in the following way:</p>

<ul>
<li>For HTML text nodes, use a <code>string</code></li>
<li>For HTML elements, use an array with:

<ul>
<li>The (tag) name of the element</li>
<li>An object, mapping attribute keys to attribute values</li>
<li>The (inlined) list of children nodes</li>
</ul></li>
</ul>

<p>Example:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;span&gt;text&lt;/span&gt;Text2
&lt;/div&gt;
</code></pre>

<p>becomes</p>

<pre><code>[
   'div',
   {},
   ['span', {}, 'text'],
   'Text2'
]
</code></pre>

<hr>

<p>I wrote a function which handles transforming a DOM Element into this kind of JS structure. You can find this function at the end of this answer. The function is written in Typescript. You can use the <a href="https://www.typescriptlang.org/play" rel="nofollow noreferrer">Typescript playground</a> to convert it to clean JavaScript.</p>

<hr>

<p>Furthermore, if you need to parse an html string into DOM, assign to <code>.innerHtml</code>:</p>

<pre><code>let element = document.createElement('div')
element.innerHtml = htmlString
</code></pre>

<hr>

<p>Also, this one is common knowledge but if you need a JSON string output, use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" rel="nofollow noreferrer"><code>JSON.stringify</code></a>.</p>

<hr>

<pre><code>/**
 * A NodeDescriptor stands for either an (HTML) Element, or for a text node
 */
export type NodeDescriptor = ElementDescriptor | string

/**
 * Array representing an HTML Element. It consists of:
 *
 * - The (tag) name of the element
 * - An object, mapping attribute keys to attribute values
 * - The (inlined) list of children nodes
 */
export type ElementDescriptor = [
   string,
   Record&lt;string, string&gt;,
   ...NodeDescriptor[]
]

export let htmlToJs = (element: Element, trim = true): ElementDescriptor =&gt; {
   let convertElement = (element: Element): ElementDescriptor =&gt; {
      let attributeObject: Record&lt;string, string&gt; = {}
      for (let { name, value } of element.attributes) {
         attributeObject[name] = value
      }

      let childArray: NodeDescriptor[] = []
      for (let node of element.childNodes) {
         let converter = htmlToJsDispatch[node.nodeType]
         if (converter) {
            let descriptor = converter(node as any)
            let skip = false

            if (trim &amp;&amp; typeof descriptor === 'string') {
               descriptor = descriptor.trim()
               if (descriptor === '') skip = true
            }

            if (!skip) childArray.push(descriptor)
         }
      }

      return [element.tagName.toLowerCase(), attributeObject, ...childArray]
   }

   let htmlToJsDispatch = {
      [element.ELEMENT_NODE]: convertElement,
      [element.TEXT_NODE]: (node: Text): string =&gt; node.data,
   }

   return convertElement(element)
}
</code></pre>


<p>I'm attempting map HTML into JSON with structure intact. Are there any libraries out there that do this or will I need to write my own? I suppose if there are no html2json libraries out there I could take an xml2json library as a start. After all, html is only a variant of xml anyway right?</p>

<p><strong>UPDATE:</strong> Okay, I should probably give an example. What I'm trying to do is the following. Parse a string of html:</p>

<pre><code>&lt;div&gt;
  &lt;span&gt;text&lt;/span&gt;Text2
&lt;/div&gt;
</code></pre>

<p>into a json object like so:</p>

<pre><code>{
  "type" : "div",
  "content" : [
    {
      "type" : "span",
      "content" : [
        "Text2"
      ]
    },
    "Text2"
  ]
}
</code></pre>

<p><strong>NOTE</strong>: In case you didn't notice the tag, I'm looking for a solution in Javascript </p>


Map HTML to JSON

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试将HTML映射到JSON中，并且保持结构不变。有没有库可以做到这一点，或者我需要编写自己的库？我想如果没有html2json库，我可以从xml2json库开始。毕竟，html只是xml的一种变体，对吧？更新：好的，我应该举个例子。我尝试做的事情如下所示。解析html字符串：<div>  <span>text<...

问将HTML映射到JSON
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将HTML映射到JSONEN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将HTML映射到JSON
EN