Question

我正在制作一个样式指南，并且我已经在预标记中禁用了css，我正在尝试将其作为有效的css应用于上面的示例框。

使用标记更容易理解（请不要介意奇怪的缩进，它是为了简化渲染而故意完成的。另外“defaut”是法语单词“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>

我尝试了几种变体，但它不起作用。这是我最近的尝试。在这里，我试图通过正则表达式选择所有内容，包括'＃'，并删除它。然后我得到数字并将它们放入背景样式。你可以说我应该直接过滤只通过正则表达式选择数值，但它也没有工作，我不知道为什么

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

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

Answer 1

除了确保您的目标div不是空的或有一些高度外，您还需要：

要么替换你的前缀并修剪textContent以摆脱尾随空格/中断以及摆脱最后;：

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

或拆分:并停留在结果数组的第二个元素上：

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

<强>演示：

$('.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

正则表达式存在两个问题：

code代码和@defaut之间有换行符，.无法匹配。来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions：

（小数点）匹配除换行符之外的任何单个字符。

使用trim()摆脱前导空格和尾随空格。
正则表达式不能用引号括起来，否则会被视为常规字符串。请改用replace(/^(.*?\\#)|;/)。

进一步说明，通过提取颜色值而不是删除其周围的所有其他内容来获取颜色值可能会更好：

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

这个正则表达式将查找“@defaut：”可能跟随空格，然后是分号终止的颜色值并提取颜色值。另外一个优点是，如果您必须在<code>标记内添加更多数据或更改格式，此解决方案不会轻易破解。

使用javascript将纯文本转换为css值

2 个答案: