3

DOM を少し操作したいので、助けが必要です。

それが私の HTML マークアップです。

<span class=“content“&gt; This is my content: {#eeeeee}grey text{/#eeeeee} {#f00000}red text{/#f00000}</span>

それがどうあるべきかです：

<span class="content">This is my content: <span style="color:#eeeeee;">grey text</span><span style="color:#f00000;">red text</span></span>

スクリプトは角かっこをスパンタグに置き換えて、フォントの色を変更する必要があります。色はブラケットにあるものと同じでなければなりません。

私のアプローチ：

function regcolor(element) {
    var text = element.innerText;
    var matches = text.match(/\{(#[0-9A-Fa-f]{6})\}([\s\S]*)\{\/\1\}/gim);
    if (matches != null) {
        var arr = $(matches).map(function (i, val) {
            var input = [];
            var color = val.slice(1, 8);
            var textf = val.slice(9, val.length - 10);
            var html = "<span style=\"color: " + color + ";\">" + textf + "</span>";
            input.push(html);
            return input;
        });

        var input = $.makeArray(arr);

        $(element).html(input.join(''));
    };

しかし、それはうまく機能していません。私はコードに満足していません。乱雑に見えます。そして、スクリプトは括弧内にないコンテンツを失います ("This is my content:")。

誰でもアイデアはありますか？

4

3 に答える 3

6

私は jQuery を少しだけ使用しましたが、それがなくても簡単にできます。これは単なる正規表現文字列の置換です。

$('.content').each(function() {
  var re = /\{(#[a-z0-9]{3,6})\}(.*?)\{\/\1\}/g;
  //          ^                 ^
  //          $1                $2

  this.innerHTML = this.innerHTML.replace(re, function($0, $1, $2) {
    return '<span style="color: ' + $1 + '">' + $2 + '</span>';
  });
});

左中括弧と右中括弧を適切に一致させるために後方参照を使用しています。

アップデート

さらに短くなる可能性があります：

$('.content').each(function() {
  var re = /\{(#[a-z0-9]{3,6})\}(.*?)\{\/\1\}/g,
  repl = '<span style="color: $1">$2</span>';

  this.innerHTML = this.innerHTML.replace(re, repl);
});

jQuery はありません

var nodes = document.getElementsByClassName('content');

for (var i = 0, n = nodes.length; i < n; ++i) {
  var re = /\{(#[a-z0-9]{3,6})\}(.*?)\{\/\1\}/g,
  repl = '<span style="color: $1">$2</span>';

  nodes[i].innerHTML = nodes[i].innerHTML.replace(re, repl);
}
于 2013-02-22T09:19:32.160 に答える
1

jqueryとこのメソッドまたは構文で短くすることができます

$(function() {

$('.content').html($('.content').text().replace( new RegExp('{(.*?)}(.*?){\/.*?}','g'), '<span style="color:$1">$2</span>'));

});
于 2013-02-22T12:06:53.997 に答える
1

正規表現を使用して、一致を直接置き換えます。

function regcolor2(element) {
    var text = element.html();
    var i = 0;
    var places = text.replace(/\{(#[0-9A-Fa-f]{6})\}([\s\S]*)\{\/\1\}/gim, function( match ) {
        var color = match.slice(1, 8);
        var textf = match.slice(9, match.length - 10);
        var html = "<span style=\"color: " + color + ";\">" + textf + "</span>";
        return html;
    });

    $(element).html(places);
}
于 2013-02-22T09:18:49.807 に答える