Store CSS in string

Question

Store CSS in string

Navigation

#1 by (5 votes)
#2 by (2 votes)
#3 by (0 votes)

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";}

Is there any online site that converts HTML, or CSS into string, to play everything inside a variable? For example:

I put this in the form:

body {
 margin:0;
 padding: 0;
}

It would return me something like this, doing all escape deal:

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

If it were in PHP, I would do so:

$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;

I need to do this to generate a 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: My question is clear, the problem is that people do not understand, and so I'm having to add more information, to clarify for those who can not understand what is obvious:

1 - I'm not looking for a solution to minify CSS

2 - I'm looking for a solution to play the mined CSS inside a variable with a string inside quotation marks.

3 - I do not want to do the string manually (that is, I do not want to type it), I want to generate a string in the string format and not its value.

javascript css

asked by anonymous 02.06.2017 / 17:51

3 answers

5

I do not know if I understood correctly what you want, because I did not understand the utility of this, but I think all you need to do is remove the line breaks and spaces in the text.

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>

02.06.2017 / 18:09

0

Maybe that's it:

<!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>

Font

02.06.2017 / 18:25

Difference of '' and '' How does .closest () work in JQuery?

score 2 · Accepted Answer

I made this example based on @jbueno's answer trying to fiddle with what I think was his expectation. See if it suits you.

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>

ESCAPING ASPAS

Here the code changes all " by \" :

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>

INSIDE ASPAS

Here, in addition to changing the quotation marks, the variable is already created within ' ' .

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>

SEPARATE STYLE SHEET

This option will only use a separate style sheet and will do everything the last option does. This function will also replace all single quotes in escaped double quotation marks . If you're doing offline, Chrome may give security error because it does not let js do this function. In this case, you would need to start Chrome with websecurity disabled, or test with files 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><linkrel="stylesheet" type="text/css" href="style.css" />
</head>

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