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('/^(.*?\\#)|;/', '')
);

sorry, it's actually the french word for "default". so it's spelled correctly in this instance because that langage was intended. Maybe a translation would be appropriate then — Antonin Cezard
– Antonin Cezard, Commented Oct 9, 2015 at 15:31
Why not take the text, trim it and split it on the : character, then you know [0] is the attribute (if it starts with @ you could easily know its a special one) and use [1] as the value? So... $(this).css('background', $(this).next().children('code').text().split(':')[1].trim()) That method makes it easier to apply later as well, as you could use [0] as the attribute if thats defined or something... — somethinghere
– somethinghere, Commented Oct 9, 2015 at 15:41
@somethinghere thanks, but it doesn't work, jquery doesn't produce any background property. That should be because the semi colon is still here with that method, I should remove it and see — Antonin Cezard
– Antonin Cezard, Commented Oct 9, 2015 at 15:46

Abhitalks · Accepted Answer · 2015-10-09 15:47:41Z

2

Apart from ensuring that your target divs 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>

answered Oct 9, 2015 at 15:47

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antonin Cezard Over a year ago

thanks, I did chose the second solution in the end. I shouldn't try to mess with regex next time and use js methods

Dave Salomon Over a year ago

@topleft It is worth getting to grips with Regex's though. Something like (/(.+#)/ would have been fine. (.replace(/(\n.+#)/, '').replace(';','');). It's probably not the best choice for what you're trying to achieve though, and the accept answer is better.

somethinghere · Accepted Answer · 2015-10-09 15:57:09Z

1

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(';','')
);

edited Oct 9, 2015 at 15:57

answered Oct 9, 2015 at 15:48

somethinghere

17.5k2 gold badges36 silver badges47 bronze badges

2 Comments

charlietfl Over a year ago

can also drop the children() and still get same results

somethinghere Over a year ago

@charlietfl Thats true, I'll do that.

Goujon · Accepted Answer · 2015-10-09 16:01:15Z

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.

Collectives™ on Stack Overflow

Transform plain text as a css value with javascript

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related