使用javascript将innerHTML转换为自定义json

这是一个innerHTML的示例，我从网页上的文本编辑器中获得，用户可以在其中编写文本并添加图像、视频和音频

<p>This is a<br>test</p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/12345" frameborder="0" allowfullscreen=""></iframe></p>
<p><audio controls><source src="https://www.test.com/123/456/example.mp3"/></audio></p>
<p>end of test</p>

这个json应该发送到后端并保存，这样移动应用程序就可以请求这些信息并以定制的方式显示它们。维持要素的秩序至关重要

---

那么，如何在javascript中从innerHTML获得上述结构呢？如果格式从未更改，您可以尝试将innerHTML转换为字符串，然后按拆分。这将创建一个包含4个元素的数组。循环遍历每个元素。对于字符串，使用string.replace（“”，“”）可以轻松地从字符串中剥离标记。对于更复杂的iframe和audio标记，请使用此正则表达式“（https.*？）。它将返回src url。然后用这些值创建对象。 下面是一些快速的伪代码：

var aHtml = JSON.stringify(element.innerHTML).split('</p>');


var result = [];
aHtml.forEach(function(item, idx, arr){
    // run regex against it, grab matching element
    var match = item.match(/"(https.*?)"/,"g");
    if(match){
        var url = match[1]; // the url
        if(match[0].indexOf('audio')> -1){
            result.push({audio: url});      
        }else{
            result.push({video: url});
        }

    }else{
        var str = item.replace(/(<p>|<br>)/g, " ");
        result.push({text: str});
    }
})

console.log(result);

var-aHtml=JSON.stringify（element.innerHTML）.split（“
”）；
var结果=[]；
aHtml.forEach（功能（项目、idx、arr）{
//对其运行regex，获取匹配的元素
var匹配=项匹配（/“（https.*？）/“g”）；
如果（匹配）{
var url=match[1]；//url
if（匹配[0]。indexOf（'audio'）>-1）{
push（{audio:url}）；
}否则{
push（{video:url}）；
}
}否则{
var str=item.replace（/（|
）/g，“”；
push（{text:str}）；
}
})
控制台日志（结果）；

希望这能给你一个基本的想法：

1） 您需要为开始文本和结束文本选择不同的键，如开始文本和结束文本

2） 创建一个虚拟DOM元素并将您拥有的innerHTML字符串存储在DOM元素的innerHTML中。这将帮助您访问DOM方法，并且可以实现您想要的。 例：

3） 创建您首选的对象结构。 例：

---

4） 最后，您可以使用JSON.stringify（最终内容）将对象转换为JSON字符串。

您的对象无效。。您需要使用

文本

键两次维护元素的顺序至关重要，然后您需要使用数组。也将有助于@tymeJV做什么said@tymeJV更新了structureNice输入以澄清。我想我现在能做了。非常感谢。

var aHtml = JSON.stringify(element.innerHTML).split('</p>');


var result = [];
aHtml.forEach(function(item, idx, arr){
    // run regex against it, grab matching element
    var match = item.match(/"(https.*?)"/,"g");
    if(match){
        var url = match[1]; // the url
        if(match[0].indexOf('audio')> -1){
            result.push({audio: url});      
        }else{
            result.push({video: url});
        }

    }else{
        var str = item.replace(/(<p>|<br>)/g, " ");
        result.push({text: str});
    }
})

console.log(result);

var content = '(innerHTML content)';
var d = document.createElement("DIV");
d.innerHTML = content;
var p_tags = d.querySelectorAll("p");

var final_content = {};
final_content["page_1"] = {};
final_content["page_1"]["content"] = [];
final_content["page_1"]["content"].push({"start_text":""});