CODEWITHSUNDEEP
javascripthtmlcss
user13849624
user13849624

Reputation:

issue with changing the style between [ ] symboles

I have a function to change colors of specific symbols through a string. It works fine except one weird issue:

const text = "I was sent, to Earth * to protect [this is inside]"

const container = document.getElementById("container");
container.innerHTML = getColored();

function getColored() {
  let result;
  result = text.replace(/\[/gm, "<span class='box-bracket'>[ </span>");
  result = result.replace(/\]/gm, "<span class='box-bracket'> ]</span>");
  result = result.replace(/\(/gm, "<span class='round-bracket'>( </span>");
  result = result.replace(/\)/gm, "<span class='round-bracket'>) </span>");
  result = result.replace("*", "<span class='separator'>/</span>");
  result = result.replace(/\|([^|]+)\|/g, '<span class="colored">$1</span>');
  // this last one is working wired to reduce the size of string between [] symbols it changes the color!!!
  result = result.replace(/(?<=\[)(.*?)(?=\])/, '<span class="reduced">$1</span>');
  return result;
}
.box-bracket {
  color: #fc0303;
}

.separator {
  color: #fcba03;
}

.colored {
  color: #1e00e3;
}

.round-bracket {
  color: #fc4e03;
}

.reduced {
  font-size: 5px;
}
<div id="container"></div>

I tried to change the font size of string in between each [] symbols with no luck...

I used this (the last line in the function):

result = result.replace(/(?<=\[)(.*?)(?=\])/, '<span class="reduced">$1</span>');

But unexpectedly it changes only the color of it (although I added the reduced class!!!)

How can I fix this? I want to be able to change the style of string between []...

Upvotes: 0

Views: 58

Answers (1)

Valentin Briand
Valentin Briand

Reputation: 3683

The issue is that your last regex transforms this <span class='box-bracket'>[ </span>this is inside<span class='box-bracket'> ]</span> into this <span class='box-bracket'>[<span class="reduced"> </span>this is inside<span class='box-bracket'> </span>]</span> .

Notice that you first closing </span> gets matched by the capturing group (.*?) of the last regex, which results in <span class="reduced"> having no effect, as it gets closed immediately.

The solution is simply to put your "reduced" regex before the ones replacing the round and square brackets.

function getColored() {
  let result;
  result = text.replace("*", "<span class='separator'>/</span>");
  result = result.replace(/\|([^|]+)\|/g, '<span class="colored">$1</span>');
  result = result.replace(
    /(?<=\[)(.*?)(?=\])/,
    '<span class="reduced">$1</span>'
  );
  result = result.replace('[', "<span class='box-bracket'>[ </span>");
  result = result.replace(']', "<span class='box-bracket'> ]</span>");
  result = result.replace('(', "<span class='round-bracket'>( </span>");
  result = result.replace(')', "<span class='round-bracket'>) </span>");
  return result;
}

Also you don't need regex for replacing the square and round brackets as you simply are matching characters, so I removed them for better efficiency.

Upvotes: 1

Related Questions