javascript - 用彩色跨度替换标志

Question

我想给我的文字上色，我正在使用这些标志来做到这一点

()并且||和++

如果文字在|标志之间，那么它将是蓝色的等等......

以下是实际代码：

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>

如您所见，一切正常 | 标志亮点但是对于()和++标志，如果我不止一次使用它们，就会出现扭曲，看看这个：

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>

请注意，我使用了两次 using () 符号...

正如我以相同的方法对 | 所做的那样 和 () 和 ++，为什么会出现这种意外行为以及如何解决此问题？

注意：对于 + 符号，会发生相同的失真。

标签： javascripthtmlcss

Answer 1

在你的正则表达式中输入错误。对于|...|分隔符，您设置\|([^|]+)\|（管道之间的所有非管道），这是正确的。

对于+...+分隔符，您设置\+([^|]+)\+（加号之间的所有非管道），这是不正确的。应该是\+([^+]+)\+。

对于(...)分隔符，您设置（括号之间的\(([^|]+)\)所有非管道），这是不正确的。应该是\(([^)]+)\)。

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>