替换括号以跨越javascript

我想稍微操纵一下DOM，需要一些帮助

这是我的HTML标记：

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

这是我的内容：{eeeeee}灰色文本{/{eeeeeeee}{{f00000}红色文本{/}f00000}

应该是这样的：

<span class="content">This is my content: <span style="color:#eeeeee;">grey text</span><span style="color:#f00000;">red text</span></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(''));
    };

函数regcolor（元素）{
var text=element.innerText；
var matches=text.match（/\{（{[0-9A-Fa-f]{6}）\}（[\s\s]*）\{\/\1\}/gim）；
如果（匹配！=null）{
var arr=$（匹配）.map（函数（i，val）{
var输入=[]；
var color=val.slice（1,8）；
var textf=val.slice（9，val.length-10）；
var html=”“+textf+”；
push（html）；
返回输入；
});
var输入=$.makeArray（arr）；
$（element.html（input.join（“”））；
};

但它工作得不太好，我对代码感觉不好，它看起来很凌乱。 脚本会释放不在括号中的内容（“这是我的内容：”）

---

有人有想法吗？

使用正则表达式直接替换匹配项：

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

函数regcolor2（元素）{
var text=element.html（）；
var i=0；
var places=text.replace（/\{（\[0-9A-Fa-f]{6}）\}（[\s\s]*）\{\/\1\}/gim，函数（匹配）{
var color=match.slice（1,8）；
var textf=match.slice（9，match.length-10）；
var html=”“+textf+”；
返回html；
});
$（元素）.html（位置）；
}

我只使用了一点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'）。每个（函数（）{
变量re=/\{（#[a-z0-9]{3,6}）}（.*？\{\/\1\}/g；
//          ^                 ^
//          $1                $2
this.innerHTML=this.innerHTML.replace（re，函数（$0，$1，$2）{
返回“+$2+”；
});
});

我正在使用back引用来正确匹配开始和结束大括号

更新

甚至可以更短：

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

$（'.content'）。每个（函数（）{
变量re=/\{（#[a-z0-9]{3,6}）}（.*？{\/\1\}/g，
repl='2美元'；
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);
}

var nodes=document.getElementsByClassName（'content'）；
对于（变量i=0，n=nodes.length；i

使用jquery和此方法或语法可以缩短

$(function() {

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

});

$（函数（）{
$（'.content'）.html（$（'.content'）.text（）.replace（新的RegExp（'{（.*）}（.*）{\/.？}'，'g'），'$2'）；
});

你打算嵌套括号块吗？比如

{first}一些文本{second}这里{/second}{/first}