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

Question

这是我从网页上的文本编辑器获得的 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>

我保存了 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获取上述结构呢？我快疯了

Answer 1

如果格式永远不变，您可以尝试将 innerHTML 转换为字符串，然后按

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

","") 轻松地从字符串中剥离标签。对于更复杂的 iframe 和音频标签，请使用此正则表达式“(https.*?)”。它将return 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);

Answer 2

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

1) 您需要 select 开始文本和结束文本的不同键，例如 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.stringify(final_content).

将对象转换为 JSON 字符串

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

Convert innerHTML into a custom json with javascript

html

javascript

parsing

json

innerhtml