在两个 | 之间更改字符串的颜色符号

Question

How can we change color of string between two | symbols in the given string:

Here is the prototype:

 const string = "Starting |this should be colored| there may be more |colored too|"; let result; // save spans here result = string; // remove this const container = document.getElementById("container"); container.innerHTML = result;

 .colored { color: #1e00e3; }

 <div id ="container"></div>

Edit: It's not that basic you should select both the string with and without |symbols because we want only the string not the symbols...

Answer 1

This can be done using String.prototype.replace()

 const string = "Starting |this should be colored| there may be more |colored too|"; const result = string.replace(/\|\b([^|]+)\b\|/g, `<span class="colored">$1</span>`); const container = document.querySelector("#container"); container.innerHTML = result;

 .colored { color: #1e00e3; }

 <div id ="container"></div>

Or also by using a function:

string.replace(/\|\b([^|]+)\b\|/g, (fullMatch, group1) => {
  return `<span class="colored">${group1}</span>`
});

And here's a Regex101 link to the regular expression from the example above.

Another example:

Answer 2

Basic regular expression with replace

 const string = "Starting |this should be colored| there may be more |colored too|"; const result = string.replace(/\|([^|]+)\|/g, '<span class="colored">$1</span>'); const container = document.getElementById("container"); container.innerHTML = result;

 .colored { color: #1e00e3; }

 <div id="container"></div>

Note: It works fine with basic text like that is given. Add in complexities like HTML markup and this solution would not work.