将括号替换为跨度JavaScript

Question

我想对DOM进行一些操作，需要一些帮助。

这是我的HTML标记：

<span class=“content“> 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>

- Priya Sharma

---

你打算嵌套括号块吗？例如{first}一些文本 {second}这里{/second}{/first}。 - Salvatorelab

Answer 1

我只使用了一点点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);
}

- Ja͢ck

Answer 2

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

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

- Salvatorelab

Answer 3

使用jQuery和这种方法或语法可以使其更短

$(function() {

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

});

- ASPMaker