在javascript中用顏色替換字串中的字符

我無法在 js 中用顏色替換“^number”字符。

我有一個 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 hello ^3 this ^4is a message" "hello" 必須是石灰色，這個 "this" 是黃色的，這個 "是一個訊息“藍色

如果有人有任何想法，歡迎他們。

編輯。對我有用的解決方案：

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);

uj5u.com熱心網友回復：

如果要根據^number數字更改 a 之后文本的顏色，可以使用正則運算式\^(\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>

uj5u.com熱心網友回復：

您可以使用正則運算式來實作它：

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);

標籤：

上一篇：未捕獲的型別錯誤：operation.match不是函式

下一篇：將moment.jsobect與JSON回應中的時間戳進行比較