Question

我有一个textarea意在接受用户HTML输入，我的目的是从该HTML中取出所有内联样式和样式标记。

我最初想过将整个事情改成字符串并做我需要的事情，但后来我意识到我可以使用DOM。

无论如何我可以在用户输入的textarea中用HTML创建一个DOM对象吗？

这样我就可以遍历输入的DOM并删除内联样式＆amp;样式标记，向这些元素添加类/ ID，并在某些生成的CSS中应用这些样式。

我可以在文本区域中从HTML创建DOM的第一部分获得一些帮助吗？它甚至可能吗？

Answer 1

从HTML创建一个jQuery对象。

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

$html = $(stringHTML);

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

Answer 2

您应该可以使用内置的innerHTML函数执行此操作。不需要图书馆。

Answer 3

您可以在容器中定义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>

如何根据用户HTML输入创建文档对象？

3 个答案: