CODEWITHSUNDEEP
javascriptjqueryregexcolorshtml
Priya Sharma
Priya Sharma

Reputation: 33

Replace brackets to span javascript

I want to manipulate the DOM a bit and need some help.

That's my HTML-Markup:

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

That's how it should be:

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

The script should replace the brackets with span tags to change the font-color. The color should the same that is in the bracket.

My approach:

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

But it's not working very well and i'm not feeling good with the code, it looks messy. And the script looses the content that's not in the brackets("This is my content:").

Anyone a idea?

Upvotes: 3

Views: 2021

Answers (3)

ASPMaker
ASPMaker

Reputation: 303

it can be shorter with jquery and this method or syntax

$(function() {

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

});

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173562

I've used just a touch of jQuery, but it could easily do without. It's just a regular expression string replacement.

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

I'm using a back-reference to properly match the opening and closing braces.

Update

Could be even shorter:

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

Look mum, no 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);
}

Upvotes: 6

Salvatorelab
Salvatorelab

Reputation: 11873

Use the regex to replace the matches directly:

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

Upvotes: 1

Related Questions