如何基於用戶HTML輸入創建文檔對象？

我有一個textarea用於輸入用戶HTML，我的目的是從HTML中取出所有內聯樣式和樣式標籤。如何基於用戶HTML輸入創建文檔對象？

我最初想到的只是把整個事情改變成一個字符串並做我需要的事情，但後來我意識到我可以使用DOM。

是否有無論如何我可以在用戶放入的textarea的HTML中創建一個DOM對象？

這樣我就可以遍歷輸入的DOM，並刪除內聯樣式&樣式標籤，爲這些元素添加類/標識符，並在某些生成的CSS中應用這些樣式。

我能從文本區域的HTML中創建DOM的第一部分獲得一些幫助嗎？它甚至有可能嗎？

2014-06-27 user1693105

從HTML中創建一個jQuery對象。

var stringHTML = $('.html-textarea').val(); //string of textarea contents 

$html = $(stringHTML);

然後你可以做任何你需要的jQuery操作（遍歷等）。

來源

2014-06-27 20:47:31 pmandell

哇，謝謝！所以現在這個新的DOM是$ html對象？如果用戶在textarea中輸入CSS，是否有類似的東西，所以我可以創建一個$ css對象？還有一種方法可以將其轉換回HTML代碼？ – user1693105

你應該可以用內建的innerHTML函數來做到這一點。沒有圖書館是必需的。

來源

2014-06-27 21:00:27

您可以定義在一個容器中的CSS樣式屬性是這樣的：

<style id="myStyles"> 

    div.headerStyle { 
    font-family: helvetica; 
    width: 500px; 
    background-color: #FFFFFF; 
    margin-left: 2.5em; 
    margin-top: 1.5em 
    } 

    h1.titleFont { 
    color: #000080; 
    width: 500px; 
    font-family: helvetica; 
    text-align: center; 
    } 

</style>

然後，你可以在自訂DOM元素，這些風格的元素是這樣的：

<script> 
    function updateTextArea(content) { 
    var html = '<textarea class="myStyle">'; 
    html += content; 
    html += '</textarea>'; 
    document.getElementById("myTextArea").innerHTML = html; 
    } 
</script>

來源

2014-07-18 22:07:14

如何基於用戶HTML輸入創建文檔對象？

回答

相關問題