I'm looking to add some color to my text using specific symbols.
(), ||, and ++ are the symbols I'm using.
If a text is enclosed in | symbols, it will appear in blue, and so on...
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>Everything seems to be working fine with the | symbol highlights. However, when using () and ++ symbols with multiple occurrences, distortions occur. Take 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>It seems that using multiple instances of () symbols causes unexpected behavior. If I'm following the same pattern for |, (), and ++ symbols, why does this issue occur and how can it be fixed?
NOTE: The same distortion occurs when using the + symbol.