主页 / 问题 / 1069830
Accepted
Дмитрий Полянин
Asked:2020-01-14 21:48:33 +0000 UTC2020-01-14 21:48:33 +0000 UTC

如何检查通过 JavaScript 输入表单的 CSS 代码的有效性

  • 772

文本输入到表单CSS中，你需要在浏览器端检查它的有效性，或者扔掉所有无效的部分，只留下有效的部分。我怎样才能做到这一点？

#textarea {
  width: 100%;
  height: 120px;
}
<textarea id="textarea">.selector1 {
   color: red;
}
.selector2 div {
   font-weight: bold;
}
some_strange_code #^</textarea>
<button onclick="test()">Проверить</button>

对我来说更好的解决方案是不使用第三方库，但是使用第三方库的解决方案也是合适的，优先考虑库的轻便性，最好是一个你可以复制给自己的功能。

也许某种浏览器解决方案将输入css的内容连接到页面内部，浏览器可能会更正这个css内容，并丢弃它不理解的所有内容。该解决方案也适合我，主要是输出将是正常有效的css。
将输入添加css到页面中没有问题，但我仍然不明白如何提取它。
如果您将其添加到标签内，style它将以与您添加它相同的形式提取它而无需更正。可能有必要以不同的方式提取，而不是通过 dom。

javascript

2 个回答

  1. 我用这个lib，不用拉很多包，重量小，很灵活，可以用

    • 1
  2. Best Answer

    如果您需要将代码清理为当前浏览器可以理解的内容

    请注意，虽然块@supports仍然存在，但如果当前浏览器不支持适当的样式，则这些属性将从规则中删除。供应商前缀也是如此。

    由于 SO 上的安全设置，在片段中不起作用，但在 jsfiddle 上一切正常：https ://jsfiddle.net/usjqmhf8/2/

    document.querySelector('button').addEventListener('click', () => {
  var css = document.querySelector('textarea').value

  var doc = document.querySelector('iframe').contentDocument
  doc.open()
  doc.write(`<!DOCTYPE html><title>CSS</title><style></style>`)
  doc.close()
  doc.querySelector('style').textContent = css
  
  var res = [...doc.styleSheets[0].cssRules].map(s => s.cssText).join("\n")
  document.querySelector('pre').textContent = res;
})
    [hidden] { display: none !important; }
html, body, textarea, pre { height: 100%; margin: 0; box-sizing: border-box; }
textarea, pre { width: 50%; float: left; overflow: auto; resize: none; }
button { position: absolute; top: 8px; right: 25px; }
    <textarea>.selector1 {
   text-overflow: -o-ellipsis-lastline;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   color: red;
}
.selector2 div {
   font-weight: bold;
   rubbish
}
@supports (qqq: www) {
  @media only print {
    qwe:zxc {
      abc: xyz;
    }
    qwe:hover {
      qqq: www;
      color: silver
    }
  }
}
some_strange_code #^
</style><script>alert(1)</script>
{} a { color: red }</textarea>
<button>Проверить</button>
<iframe hidden sandbox="allow-same-origin"></iframe>
<pre></pre>

    • 1

相关问题