CODEWITHSUNDEEP
javascripthtmlcssregex
user13849624
user13849624

Reputation:

replace specific signs with styled spans in a string

I want to replace spans with specific class styles using | , $ , ^ , # , @ only signs in a string like this:

const text = `|If I create a random| text or xml file, |they do| not |end up| being wrapped in html. I also $tried to$ disable $all the$ plugins and ^default^ layout ^settings^ as well as the If I #create# a random #text# or xml file, they @do not@ end up @being wrapped in html@.
I also tried to disable all the plugins and default layout settings as well as the`;

let render = '';
render += getColored(text);
document.getElementById('content').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>');
    result = result.replace(/\#([^+]+)\#/g, '<span class="purple-string">$1</span>');
    result = result.replace(/\@([^+]+)\@/g, '<br><span class="ltr-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: 0px 0.5px 1px #b46a00;
}

.purple-string {
  font-family: "Vazir";
  color: #8805ff;
  display: inline-block;
  text-shadow: 0px 0.5px 1px #b46a00;
}

.ltr-string {
  direction: ltr;
  font-size: .9em;
  color: #565559;
  display: block;
}
<div id="content"></div>

As you see it only works for the | sign and for other signs distortions occures.

Note that using /$([^)]+)$/g instead of /|([^|]+)|/g not solved the issue.

How can I fix this?

Upvotes: 1

Views: 50

Answers (1)

zoldxk
zoldxk

Reputation: 1

I'm not a pro but I followed the first one that works and I got this result:

const text = `|If I create a random| text or xml file, |they do| not |end up| being wrapped in html. I also $tried to$ disable $all the$ plugins and ^default^ layout ^settings^ as well as the If I #create# a random #text# or xml file, they @do not@ end up @being wrapped in html@.
I also tried to disable all the plugins and default layout settings as well as the`;

let render = '';
render += getColored(text);
document.getElementById('content').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>');
    result = result.replace(/\#([^#]+)\#/g, '<span class="purple-string">$1</span>');
    result = result.replace(/\@([^@]+)\@/g, '<br><span class="ltr-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: 0px 0.5px 1px #b46a00;
}

.purple-string {
  font-family: "Vazir";
  color: #8805ff;
  display: inline-block;
  text-shadow: 0px 0.5px 1px #b46a00;
}

.ltr-string {
  direction: ltr;
  font-size: .9em;
  color: #565559;
  display: block;
}
<div id="content"></div>

Upvotes: 1

Related Questions