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

回答

相關問題