在javascript中用颜色替换字符串中的字符

Question

我在替换一个"数字"；js中带有颜色的字符。

我有一个PHP代码，我正试图传递给js，但我没有成功。

<?php
function ColorizeName($s)
{
$pattern[0] = "^0";
$replacement[0] = '</font><font color="black">';
$pattern[1] = "^1";
$replacement[1] = '</font><font color="red">';
$pattern[2] = "^2";
$replacement[2] = '</font><font color="lime">';
$pattern[3] = "^3";
$replacement[3] = '</font><font color="yellow">';
$pattern[4] = "^4";
$replacement[4] = '</font><font color="blue">';
$pattern[5] = "^5";
$replacement[5] = '</font><font color="aqua">';
$pattern[6] = "^6";
$replacement[6] = '</font><font color="#FF00FF">';
$pattern[7] = "^7";
$replacement[7] = '</font><font color="white">';
$pattern[8] = "^8";
$replacement[8] = '</font><font color="white">';
$pattern[9] = "^9";
$replacement[9] = '</font><font color="gray">';

$s = str_replace($pattern, $replacement, htmlspecialchars($s));
$i = strpos($s, '</font>');
if ($i !== false) {
return substr($s, 0, $i) . substr($s, $i + 7, strlen($s)) . '</font>';
} else {
return $s;
}
}

我试过。。。

function replace(str) {
var strArr = str.split('');
for (var i = 0; i < strArr.length; i++) {
if (strArr[i] == '^2') {
strArr[i].replace('^2', "<font color='blue'> </font>");
}
return str;
}
}

我需要的是：如果你输入这样的字符串=str"2你好^3这^4是一条消息"；你好"；必须是石灰色的；这个"；呈黄色；是一条消息"；蓝色

如果有人有任何想法，欢迎。

编辑。对我有效的解决方案：

const colors = ['black', 'red', 'lime', 'yellow', 'blue', 'aqua', '#FF00FF', 'white', 'white', 'gray'];
const text = 'The ^2quick brown ^5fox jumps over the ^9lazy ^6dog.'
const replace = text => 
// wrap the entire text with <font color="black"></font> if the text contains color code
text.replace(/^.*^d.*$/, '<font color="black">$&</font>')
// replace the color code with corresponding color tag
.replace(/^(d)/g, (_, num) => `</font><font color="${colors[num]}">`);
const result = replace(text);
console.log(result);

Answer 1

如果您想根据数字更改^number后面的文本的颜色，可以使用regex:^(d)([^^]+):

function colorizeName(str) {
const colors = ['black', 'red', 'lime', 'yellow', 'blue', 'aqua', '#FF00FF', 'white', 'white', 'gray'];
return str.replace(/^(d)([^^]+)/g, (_, n, txt) => `<font color="${colors[+n]}">${txt}</font>`);
}

---

演示：

function colorizeName(str) {
const colors = ['black', 'red', 'lime', 'yellow', 'blue', 'aqua', '#FF00FF', 'white', 'white', 'gray'];
return str.replace(/^(d)([^^]+)/g, (_, n, txt) => `<font color="${colors[+n]}">${txt}</font>`);
}

<input id="input" value="^2 hello ^3 this ^4is a message" style="width: 100%; font-size: 16px;">
<button onclick="render.innerHTML = colorizeName(input.value)">Generate</button>
<div id="render"></div>

---

如果这是在现代浏览器中运行的HTML，那么使用样式会更好。您甚至可以使用来更安全地防止HTML注入

function colorizeName(str) {
const colors = ['black', 'red', 'lime', 'yellow', 'blue', 'aqua', '#FF00FF', 'white', 'white', 'gray'];
return str.replace(/^(d)([^^]+)/g, (_, n, txt) => {
const span = document.createElement('span');
span.style.color = colors[+n];
span.innerText = txt;
return span.outerHTML;
});
}

演示：

function colorizeName(str) {
const colors = ['black', 'red', 'lime', 'yellow', 'blue', 'aqua', '#FF00FF', 'white', 'white', 'gray'];
return str.replace(/^(d)([^^]+)/g, (_, n, txt) => {
const span = document.createElement('span');
span.style.color = colors[+n];
span.innerText = txt;
return span.outerHTML;
});
}

<input id="input" value="^2 hello ^3 this ^4is a message" style="width: 100%; font-size: 16px;">
<button onclick="render.innerHTML = colorizeName(input.value)">Generate</button>
<div id="render"></div>

Answer 2

您可以使用regex来实现它：

const colors = ['black', 'red', 'lime', 'yellow', 'blue', 'aqua', '#FF00FF', 'white', 'white', 'gray'];
const text = 'The ^2quick brown ^5fox jumps over the ^9lazy ^6dog.'
const replace = text => 
// wrap the entire text with <font color="black"></font> if the text contains color code
text.replace(/^.*^d.*$/, '<font color="black">$&</font>')
// replace the color code with corresponding color tag
.replace(/^(d)/g, (_, num) => `</font><font color="${colors[num]}">`);
const result = replace(text);
console.log(result);