Карта HTML для JSON

Ответ 1

Я только что написал эту функцию, которая делает то, что вы хотите, попробуйте, дайте мне знать, если она не работает правильно для вас:

// 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+.etc); Если вам нужно поддерживать старые браузеры, вы можете включить json2.js.

В качестве аргумента может использоваться либо DOM element, либо string, содержащий действительный XHTML (я уверен, я не уверен, будет ли DOMParser() захлебываться в определенных ситуациях, поскольку он установлен на "text/xml" или независимо от того, просто ли он не обеспечивает обработку ошибок. К сожалению, "text/html" имеет плохую поддержку браузера).

Вы можете легко изменить диапазон этой функции, передав другое значение как element. Независимо от того, какое значение вы передадите, будет являться корнем вашей карты JSON.

Enjoy

Ответ 2

html2json и json2html на GitHub, который построен на основе John Resig htmlparser.js, включает в себя несколько тестовых примеров и отлично подходит для меня.

Ответ 3

Представление сложных HTML-документов будет сложным и насыщенным, но я хотел бы поделиться несколькими методами, чтобы показать, как начать эту программу. Этот ответ отличается тем, что он использует абстракцию данных и метод toJSON для рекурсивного построения результата

Ниже html2json - это крошечная функция, которая берет HTML node в качестве входных данных и в результате возвращает строку JSON. Обратите особое внимание на то, как код довольно плоский, но он все еще способен создавать глубоко вложенную древовидную структуру - все возможно с практически нулевой сложностью.

// 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')))

<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>

Ответ 4

У меня появилось несколько ссылок, когда вы читаете в ExtJS full framework сам по себе JSON.

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

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

онлайн XML для конвертера JSON: http://jsontoxml.utilities-online.info/

UPDATE BTW. Чтобы получить JSON, как добавленный в вопросе, HTML должен иметь теги типа и содержимого в нем тоже, как это, или вам нужно использовать некоторое преобразование xslt для добавления этих элементов при выполнении преобразования JSON

<?xml version="1.0" encoding="UTF-8" ?>
<type>div</type>
<content>
    <type>span</type>
    <content>Text2</content>
</content>
<content>Text2</content>

Ответ 5

Этот выглядит довольно хорошо JSON для HTML и HTML для JSON https://github.com/andrejewski/himalaya

Ответ 6

Существует простой конвертер HTML в JSON. Вы можете скопировать и вставить код HTML и нажать "Преобразовать", чтобы преобразовать HTML в JSON.

И есть много Онлайновый HTML для конвертеров JSON.

Ответ 7

Это может быть полезно - "XSLTJSON: преобразование XML в JSON с использованием XSLT", http://www.bramstein.com/projects/xsltjson/