replacing signs with colored spans

Question

I want to colorize my text and I'm using these signs to do it

() and || and ++

if a text is between | signs then it will be blue and etc...

Here is the code in action:

const text = "|Working on the| ideas |above|, and if you're working " + 
    "with a form, you can define a hidden input and assign it a " + 
    "value |of the last| focused input Working on the ideas above, " + 
    "and if you're working with a form, you can define a hidden |input " + 
    "and assign| it a value of the last focused input Working " + 
    "on the ideas above, and if you're working with a |form,| " + 
    "you can define a hidden input and assign it |a| value of the " + 
    "last |focused input|";

const contentArea = document.getElementById('contentArea')
let render = '';

render += getColored(text);


contentArea.innerHTML = render;


function getColored(text) {
  let result = text;
  result = result.replace(/\|([^|]+)\|/g, '<span class="blue-string">$1</span>');
  result = result.replace(/\(([^|]+)\)/g, '<span class="red-string">$1</span>');
  result = result.replace(/\+([^|]+)\+/g, '<span class="orange-string">$1</span>');
  return result;
}

.blank {
   display: inline-block;
   border-bottom: 4px dotted red;
   width: 150px;
}

.blue-string {
  font-family: "Vazir";
  color: #7e7cff;
  display: inline-block;
  text-shadow: 0px 0px 1px #010076;
}

.red-string {
  font-family: "Vazir";
  color: #ff005e;
  display: inline-block;
  text-shadow: 0px 0.5px 1px #e40053;
}

.orange-string {
  font-family: "Vazir";
  color: #ffb000;
  display: inline-block;
  text-shadow: 1px 1px 1px #b46a00;
}

<div id="contentArea"></div>

As you see everything works fine with | sign highlights But for () and ++ signs if I have more than one occurrence of using them distortions occur have a look at this:

const text = "|Working on the| ideas |above|, and if you're working " + 
    "with a form, you can define a hidden input and assign it a " + 
    "value |of the last| focused input Working on the ideas above, " + 
    "and if you're working with a form, you can define a hidden |input " + 
    "and assign| it a value of the last focused input Working " + 
    "on the ideas above, and if you're working with a |form,| " + 
    "you can define a hidden input and assign it |a| value of the " + 
    "last |focused input|";

const contentArea = document.getElementById('contentArea')
let render = '';

render += getColored(text);


contentArea.innerHTML = render;


function getColored(text) {
  let result = text;
  result = result.replace(/\|([^|]+)\|/g, '<span class="blue-string">$1</span>');
  result = result.replace(/\(([^|]+)\)/g, '<span class="red-string">$1</span>');
  result = result.replace(/\+([^|]+)\+/g, '<span class="orange-string">$1</span>');
  return result;
}

.blank {
   display: inline-block;
   border-bottom: 4px dotted red;
   width: 150px;
}

.blue-string {
  font-family: "Vazir";
  color: #7e7cff;
  display: inline-block;
  text-shadow: 0px 0px 1px #010076;
}

.red-string {
  font-family: "Vazir";
  color: #ff005e;
  display: inline-block;
  text-shadow: 0px 0.5px 1px #e40053;
}

.orange-string {
  font-family: "Vazir";
  color: #ffb000;
  display: inline-block;
  text-shadow: 1px 1px 1px #b46a00;
}

<div id="contentArea"></div>

Note that I used two occurrences of using () signs...

As I did both this in a same approach for | and () and ++, why I get this unexpected behavior and how to fix this?

NOTE: for + sign the same distortion occurs.

Answer 1

Typo in your regex. For |...| delimiters, you set \|([^|]+)\| (all non-pipe between pipes), which is correct.

For +...+ delimiters, you set \+([^|]+)\+ (all non-pipe between pluses), which is incorrect. Should be \+([^+]+)\+.

For (...) delimiters, you set \(([^|]+)\) (all non-pipe between parenthesis), which is incorrect. Should be \(([^)]+)\).

const text = "(Working on the ideas above), and |if| you're +working+ with a form, you can define a hidden input and assign it a value of the last focused input Working on the ideas above, and if you're working with a form, you can define a hidden input and assign it a value of the last (focused) input Working on the ideas above, and if you're working with a form, you can define a hidden input and assign it a value of the last focused input";

const contentArea = document.getElementById('contentArea')
let render = '';

render += getColored(text);


contentArea.innerHTML = render;


function getColored(text) {
    let result = text;
        result = result.replace(/\|([^|]+)\|/g, '<span class="blue-string">$1</span>');
        result = result.replace(/\(([^)]+)\)/g, '<span class="red-string">$1</span>');
        result = result.replace(/\+([^+]+)\+/g, '<span class="orange-string">$1</span>');
        return result;
}

.blank {
   display: inline-block;
   border-bottom: 4px dotted red;
   width: 150px;
}

.blue-string {
  font-family: "Vazir";
  color: #7e7cff;
  display: inline-block;
  text-shadow: 0px 0px 1px #010076;
}

.red-string {
  font-family: "Vazir";
  color: #ff005e;
  display: inline-block;
  text-shadow: 0px 0.5px 1px #e40053;
}

.orange-string {
  font-family: "Vazir";
  color: #ffb000;
  display: inline-block;
  text-shadow: 1px 1px 1px #b46a00;
}

<div id="contentArea"></div>

Answer 2

You can use a lazy quantifier ? to match as little characters as needed. So the regex can match the next symbol pair

const text = "(Working on the ideas above), and if you're |working| with a form, you can define a hidden input and assign it a value of the last focused input Working on the ideas +above+, and if you're working with a form, you can define a hidden +input+ and____ assign it a value of the last (focused) input +Working on the ideas above+, and if you're working with a form, you can define a |hidden input and assign| it a value of the last focused input";
const contentArea = document.getElementById('contentArea');

const getColored = text => text.replace(/\|(.+?)\|/g, '<span class="blue-string">$1</span>')
  .replace(/\((.+?)\)/g, '<span class="red-string">$1</span>')
  .replace(/\+(.+?)\+/g, '<span class="orange-string">$1</span>')
  .replace(/_+/g, "&nbsp;<span class='blank'></span>&nbsp;");

contentArea.innerHTML = getColored(text);

.blank {
  display: inline-block;
  border-bottom: 4px dotted red;
  width: 150px;
}

.blue-string {
  font-family: "Vazir";
  color: #7e7cff;
  display: inline-block;
  text-shadow: 0px 0px 1px #010076;
}

.red-string {
  font-family: "Vazir";
  color: #ff005e;
  display: inline-block;
  text-shadow: 0px 0.5px 1px #e40053;
}

.orange-string {
  font-family: "Vazir";
  color: #ffb000;
  display: inline-block;
  text-shadow: 1px 1px 1px #b46a00;
}

<div id="contentArea"></div>