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

这是我从网页上的文本编辑器获取的innerHTML示例，用户可以在其中编写文本并添加图像，视频和音频。使用javascript将innerHTML转换为自定义json

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

我保存的innerHTML这样我就可以重新加载在编辑器中用户编写的内容，但我也需要格式化像下面这样的JSON结构的信息：

{ 
    "page1": { 
    contents: [ 
     {"text":"This is a test"}, 
     {"video":"https://www.youtube.com/embed/12345"}, 
     {"audio":"https://www.test.com/123/456/example.mp3"}, 
     {"text":"end of test"}  
    ] 
    } 
}

此JSON应该被发送到后端并保存，所以移动应用程序可以请求这些信息并以定制的方式显示它们。维护元素的秩序至关重要。

那么，我怎么能从javascript中的innerHTML获得上述结构？我疯了

来源

2017-08-30 Razinar

那么，你的对象是无效的..你有'文本'键两次 – tymeJV

_Maintaining元素的顺序是至关重要的_那么你需要使用一个数组。还会帮助什么@tymeJV说 – baao

@tymeJV更新结构 – Razinar

希望这可能会给你一个基本思路：

1）您需要选择开始文本和文本到底像start_text和end_text不同的密钥。

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

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

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

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

4）最后，你可以对象转换为JSON字符串与JSON.stringify（final_content）。

来源

2017-08-30 16:06:22

很好的输入来澄清。我认为我现在能够做到。谢谢 – Razinar

如果格式永远不会改变，你可以尝试将innerHTML转换为字符串，然后拆分

。这将创建一个包含4个元素的数组。遍历每个元素。对于字符串，可以使用string.replace（“

”，“”）轻松地从字符串剥离标签。对于更复杂的iframe和音频标签，请使用此正则表达式“（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);

来源

2017-08-30 15:57:45 Nuspeed1

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

回答

相关问题