Transform plain text as a css value with javascript

Question

I'm making a style guide and I have disabled css in pre markup that I'm trying to apply as valid css to example boxes above.

Easier to understand with markup (please don't mind the weird indentation, it's done on purpose to simplify rendering. Also "defaut" is the french word for "default") :

<div id="styleguide" class="field-style">

    <div class="colored">
    </div>
    <pre><code class="language-less">
@defaut: #000;
</code></pre>

    <div class="colored">
    </div>
    <pre><code class="language-less">
@defaut: #e55240;
</code></pre>

    <div class="colored">
    </div>
    <pre><code class="language-less">
@defaut: #fff;
</code></pre>

</div>

I tried several variations but it doesn't work. Here is my latest attempt. In here I'm trying to select via regex everything up to and including '#', and delete it. Then I get the numbers and put them in background style. You could say I should filter directly to only select numerical values via regex, but it didnt't work either and I don't know why

$('.field-style .colored').each(function() {
var $this = $(this);

$this.css(
    'background', '#' +
    $this
    .next('pre')
    .children('code')
    .text()
    .replace('/^(.*?\\#)|;/', '')
);

Answer 1

Apart from ensuring that your target div s are either not empty or have some height, you need to:

either replace your prefix and trim the textContent to get rid of trailing spaces/breaks along with getting rid of the last ; :

$this.next().find('code').text().replace('@defaut: ', '').trim().slice(0, -1)

or split on : and rest on the second element of the resulting array:

$this.next().find('code').text().split(':')[1].trim().slice(0, -1)

Demo :

 $('.colored').each(function() { var $this = $(this), prop = $this.next().find('code').text().replace('@defaut: ', '').trim().slice(0, -1) ; $this.css({'background-color': prop }); }); 

 div.colored { height: 16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styleguide" class="field-style"> <div class="colored">First</div> <pre><code class="language-less"> @defaut: #f00; </code></pre> <div class="colored">Second</div> <pre><code class="language-less"> @defaut: #0f0; </code></pre> <div class="colored">Third</div> <pre><code class="language-less"> @defaut: #00f; </code></pre> </div> 

Answer 2

You could try to use the colon to split the text and take the second value resulting from it, then removing the semicolon:

$(this).css(
    'background',
     $(this).next().text()
        .split(':')[1]
        .trim()
        .replace(';','')
);

Answer 3

There's a two issues with your regular expression:

• There's a newline between the code tag and @defaut which will not be matched by the . . From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions :

  (The decimal point) matches any single character except the newline character.

  Use trim() to get rid of leading and trailing space.

• The regular expression must not be enclosed in quotes, otherwise it will be treated as a regular string. Use replace(/^(.*?\\\\#)|;/) instead.

As a further note it might be better to get the color value by extracting it instead of deleting everything else around it:

$this
    .next('pre')
    .children('code')
    .text().match(/@defaut:\s*(#.+?);/)[1]

This regular expression will look for "@defaut:" potentially followed whitespace, then followed by a color value terminated by a semicolon and extract the color value. An added avantage is that this solution won't break as easily in case you have to add more data inside the <code> tag or change the formatting.