Question

我处于用户可以在文本框中粘贴任何HTML的情况。然后我必须操纵HTML，例如找出所有锚标签或div等等。

为了解决这个目的，我制作了一个隐藏的div，并将该div的html设置为与粘贴的HTML相同。

var pastedHtml = $("#textbox-id").val();
$("#hiddendiv").html(pastedHtml);

完成此操作后，我可以完全访问该粘贴的HTML文档作为DOM元素，并可以使用jQuery或Javascript轻松操作它。

现在我遇到的问题是，如果有某种类或id或任何其他选择器与母版页相同，每当我将HTML设置为隐藏div时，我的母版页都会受到影响。

所以我试图以某种方式将CSS样式封装在粘贴的HTML中，这样它就不会影响外页。

粘贴的HTML可以包含内联样式（我认为这不是问题），标记内部的样式甚至是外部文件的链接。事实上它可以是任何东西。

那么有没有可用的库？或者我应该采取什么方法来解决这个问题。

任何帮助对我都非常有益。

如果需要更多数据，请与我们联系。

提前致谢。

Answer 1

使用iframe。在这种情况下，内容将与主文档完全隔离。

使用html（parsedHTML）对我来说看起来很不安全。

的Janis

Answer 2

如果您可以控制分配CSS，只需在为内部元素指定CSS时使用隐藏的div id。

通过这种方式，它们通常具有更高的特异性并覆盖类似的规则。

示例堆栈代码段

#hiddendiv #div1 {
  color: red;
}

#hiddendiv .blue {
  color: blue;
}

<div id="hiddendiv">

  <!-- users elements -->

  <div id="div1">Hey, I'm red <span class="blue"> and I am blue </span></div>

</div>

如果没有，这篇文章可能是一个替代方案，其中一个孤立内部元素