2
.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';.ql-snow .ql-tooltip a.ql-action2::after{border-right:1px solid #ccc;content:"Cancel";}

Existe algum site online que converte HTML, ou CSS em string, para jogar tudo dentro de uma variável? Por exemplo:

Coloco no form isso:

body {
 margin:0;
 padding: 0;
}

Ele me retornaria algo como isso, fazendo toda tratativa de escape:

var css = 'body{margin:0;padding:0}';

Se fosse em PHP, eu faria assim:

$var =  <<<END
   .ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';.ql-snow .ql-tooltip a.ql-action2::after{border-right:1px solid #ccc;content:"Cancel";}
END;

Preciso fazer isso para gerar um PDF:

var valor1 = 'aqui viria o css minificado com as aspas escapada';
var valor2 = 'mais CSS aqui...';

 $('.main').prepend('<style type="text/css">' + [
                 valor1,
                 valor2
              ].join('') + '</style>');

OBS: Minha pergunta está clara, o problema é que as pessoas não entenderam, e por isso estou tendo que que acrescentar mais informação, para esclarecer para aqueles que não conseguem compreender o que está óbvio:

1 - Não estou procurando uma solução para minificar o CSS

2 - Estou procurando uma solução para jogar o CSS minificado dentro de uma variável com uma string dentro de aspas.

3 - Não quero fazer a string manualmente (ou seja, não quero digitá-la), quero gerar uma string no formato de string e não do seu valor.

4
  • 1
    Não é capturar o valor e remover as quebras de linha e espaços?
    – Jéf Bueno
    Commented 2/06/2017 às 15:57
  • Sim, eu preciso desse css em valor... Mas não só esse... manualmente, dá muito trampo. Commented 2/06/2017 às 16:00
  • Eu tentei nesse site, mas não achei nada. Commented 2/06/2017 às 16:02
  • Não dá trabalho, veja a resposta do jbueno. Commented 2/06/2017 às 16:11

3 Respostas 3

5

Eu não sei se entendi bem o que você quer, porque não entendi a utilidade disto, mas acho que tudo que precisas é remover as quebras de linhas e espaços do texto.

document.getElementById('btn-remover').addEventListener('click', fnClick);

function fnClick(){
  var val = document.getElementById('txt-css').value;
  val = val.replace(/[\s]/g, ' ');
  console.log(val);
}
textarea {
  height: 300px;
  width: 300px;
}
<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

5
  • É quase isso, só que não deu certo. Commented 2/06/2017 às 16:16
  • 2
    ué, explique o que "não deu certo" então para o autor melhorar a resposta. Commented 2/06/2017 às 16:43
  • 1
    @IvanFerrer nesse caso você precisa detalhar o que não deu certo.
    – EMBarbosa
    Commented 2/06/2017 às 16:44
  • Pois é, eu tou ainda esperando o feedback XD
    – Jéf Bueno
    Commented 2/06/2017 às 16:47
  • O que não deu certo, o resultado do seu filtro, não dá pra colar entre aspas simples. o 'Edit' e o "Cancel" continuam com as mesmas aspas. Se for aspas simples, deveria ser 'Cancel' e \"Cancel\" ,inversamente, "Cancel"e '\Cancel\' . Commented 5/06/2017 às 19:51
2

Fiz este exemplo me baseando na resposta do @jbueno tentando mexer no que eu acho que era sua expectativa. Veja se te atende.

document.getElementById('btn-remover').addEventListener('click', fnClick);
var str = document.getElementsByTagName('style')[0].firstChild.data;
var textArea = document.getElementById('txt-css');

function fnClick() {
  var val = str.replace(/\s+/g, ' ');
  console.log(val);
  textArea.innerHTML += val;
}
textarea {
  height: 150px;
  width: 300px;
}
<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

ESCAPANDO ASPAS

Aqui o código troca todos os " por \":

document.getElementById('btn-remover').addEventListener('click', fnClick);
var str = document.getElementsByTagName('style')[0].firstChild.data;
var textArea = document.getElementById('txt-css');

function fnClick(){
  var val = str.replace(/\s+/g, ' ');
  var newVal = val.replace(/"/g, '\\"');
  console.log(newVal);
  textArea.innerHTML += newVal;
}
textarea {
  height: 150px;
  width: 300px;
}
.escaped {
  content: "http://urlAleatório.com";
}
<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

DENTRO DE ASPAS

Aqui, além de trocar as aspas, a variável é criada já dentro das ' '.

document.getElementById('btn-remover').addEventListener('click', fnClick);
var str = document.getElementsByTagName('style')[0].firstChild.data;
var textArea = document.getElementById('txt-css');

function fnClick(){
  var val = str.replace(/\s+/g, ' ');
  var escVal = val.replace(/"/g, '\\"');
  var newVal = "'" + escVal + "'";
  console.log(newVal);
  textArea.innerHTML += newVal;
}
textarea {
  height: 150px;
  width: 300px;
}
.escaped {
  content: "http://urlAleatório.com";
}
<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

FOLHA DE ESTILO SEPARADA

Esta opção funcionará apenas usando uma folha de estilo separada e fará tudo o que a última opção faz. Esta função também irá substituir todas as aspas simples em aspas duplas escapadas. Se estiver fazendo offline, o Chrome pode dar erro de segurança pois ele não deixa o js fazer esta função. Nesse caso, você precisaria iniciar o Chrome com websecurity disabled, ou fazer o teste com arquivos online.

document.getElementById('btn-remover').addEventListener('click', fnClick);
var textArea = document.getElementById('txt-css');
var str;
$.ajax({
  url: 'style.css',
  success: function(data) {
    str = data;
  }
});

function fnClick() {
  var val = str.replace(/\s+/g, ' ');
  var escVal = val.replace(/"/g, '\\"');
  var escVal = escVal.replace(/'/g, '\\"');
  var newVal = "'" + escVal + "'";
  console.log(newVal);
  textArea.innerHTML += newVal;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

13
  • A sua resposta é a que mais se aproxima, porém, vc removeu as aspas, eu gostaria de tratar ela para este formato quando for as dupla: \" neste formato. Commented 2/06/2017 às 18:22
  • @IvanFerrer Não entendi. Você gostaria que a variável já viesse com aspas em sua volta? Tipo: 'body { repare nas aspas: 0px; }' ? Seria isso? Commented 2/06/2017 às 18:29
  • @IvanFerrer Ou você quer transformar todas as " em \" na string criada? Commented 2/06/2017 às 18:38
  • @IvanFerrer Botei um EDIT escapando as aspas. Vê se é isso. Commented 2/06/2017 às 18:41
  • { "message": "Uncaught TypeError: Cannot read property 'replace' of undefined", "filename": "https://stacksnippets.net/js", "lineno": 30, "colno": 16 } Commented 5/06/2017 às 19:44
0

Talvez seja isso:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue; 
    color: red;
}
p {
    background-color: green; 
    color: red;
}
</style>
</head>
<body>

<p>Click the button to display the style properties of this document.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementsByTagName("STYLE")[0];
    document.getElementById("demo").innerHTML = x.innerHTML;
}
</script>

</body>
</html>

Fonte

1
  • Sua resposta é interessante, porém, meu estilo está vindo de um arquivo style.css, então não tem como eu fazer desta forma. Commented 2/06/2017 às 18:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .