Javascript .replace() тот же символ отличный результат

Question

У меня есть слово: google, и я меняю каждый символ на определенный цвет, но я не могу понять, как делать буквы «o» разными цветами

Это мой JS:

var text = $("#typed-strings").html().replace(/e/g, '<span class="red">e</span>').replace(/g/g, '<span class="blue">g</span>').replace(/l/g, '<span class="green">l</span>').replace(/o/g, '<span class="yellow">o</span>'); 
 
$("#typed-strings").html(text);

.red { 
 
    color: rgb(219, 50, 54); 
 
} 
 
.blue { 
 
    color: rgb(72, 133, 237); 
 
} 
 
.green { 
 
    color: rgb(60, 186, 84); 
 
} 
 
.yellow { 
 
    color: rgb(244, 194, 13); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="typed-strings">google</div>

может быть, кто-то есть идеи?

Спасибо!

EDIT:

Спасибо всем за такой богатый ответ на мой вопрос был отредактирован модератором, может быть, поэтому вы видели некоторые изменения. Я загрузил эту пробную версию на герою, чтобы сделать вещи проще, но да, у меня есть этот длинный текст, и каждый раз, когда появляется буква «o», мне бы хотелось, чтобы она была красной или желтой, html не имеет значения потому что это чисто для визуализации, но я многое узнал из разговоров - спасибо! это приложение: https://googlefonts.herokuapp.com

EDIT 2: также добавил нерабочую версию в пределах страницы

Answer 1

Как уже указывалось ваш вопрос в том, что вы заменяете g с <span class="...">g</span> затем заменить все l's в последней строке, которая заменяет л в классе.

Другой способ использования этой функции - заменить функцию. При использовании функции каждое совпадение заменяется поочередно, и любые сделанные вами замены игнорируются.

Кроме того, вы можете использовать отдельный ключ и логическое значение для отслеживания того, заменили ли вы первый o уже или нет. Я добавил это в свой пример, используя логическое значение как часть замены-ключа для буквы o, чтобы упростить ситуацию.

var replacements = { 
 
    g: '<span class="blue">g</span>', 
 
    o0: '<span class="red">o</span>', 
 
    o1: '<span class="yellow">o</span>', 
 
    l: '<span class="green">l</span>', 
 
    e: '<span class="red">e</span>' 
 
}; 
 

 
var ele = $("#typed-strings"); 
 
var text = ele.html(); 
 

 
var firstODone = false; 
 
text = text.replace(/[gogle]/g, function (letter) { 
 
    var key = letter; 
 
    if (key === 'o') { 
 
    key = key + (+firstODone); //Convert the boolean to an integer, 0 or 1 
 
    firstODone = true; 
 
    } 
 
    
 
    return replacements[key]; 
 
}) 
 
    
 
ele.html(text);

.red { 
 
    color: rgb(219, 50, 54); 
 
} 
 
.blue { 
 
    color: rgb(72, 133, 237); 
 
} 
 
.green { 
 
    color: rgb(60, 186, 84); 
 
} 
 
.yellow { 
 
    color: rgb(244, 194, 13); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="typed-strings">google</div>

Если требуется только JQuery для этого вы можете легко избавиться от него, тоже.Вы можете использовать var ele = document.getElementById("typed-strings"); , чтобы получить свой элемент и ele.innerHTML , чтобы получить и установить html в элемент. .: например ele.innerHTML = text

Answer 2

Вы можете использовать следующее регулярное выражение:

letter + '{1}(?![^<]*\>)' 

выше заменит только строчные однобуквенные буквы G, которые не находятся внутри бирки <>, вот пример:

function replaceWithSpanClass(string, letter, className){ 
 
    var regex = new RegExp(letter + '{1}(?![^<]*\>)', 'g'); 
 
    return string.replace(regex, '<span class="' + className + '">' + letter + '</span>') 
 
} 
 

 
var text = 'google'; 
 
text = replaceWithSpanClass(text, 'g', 'red'); 
 
text = replaceWithSpanClass(text, 'o', 'blue'); 
 
text = replaceWithSpanClass(text, 'l', 'yellow'); 
 
text = replaceWithSpanClass(text, 'e', 'green'); 
 

 
document.getElementById('result').innerHTML = text;

.yellow { color: yellow; } 
 
.green { color: green; } 
 
.blue { color: blue; } 
 
.red { color: red; }

<div id="result"></div>

В данном случае это означает, что класс, как yellow не получает его o заменен <span class="blue">o</span>. Таким образом, вы уверены, что вы только изменение вне ваших узлов.

Answer 3

<script type="text/javascript"> 


$(document).ready(() => { 
    let oldStr = $("#typed-strings").html(); 
    let newStr = ''; 

    for(let i = 0; i < oldStr.length; i++) { 
     if (oldStr[i] === 'g') { 
      newStr += '<span class="blue">g</span>' 
     } else if (oldStr[i] === 'o') { 
      newStr += '<span class="yellow">o</span>' 
     } 
     // Add other letters here 
    } 

    $("#typed-strings").html(newStr); 
}); 


</script> 

Answer 4

Вы можете создать функцию, которая будет возвращать цвет буквы и использовать метод замены с функцией обратного вызова, как это:

var colors = { 
    g: 'blue', 
    o: 'yellow', 
    l: 'green', 
    e: 'red' 
}; 
function wrapTheLetter(letter) { 
    var colorClass = colors[letter]; 
    if (letter == 'o') { 
     // update it's color for the future 
     colors.o = 'grey'; 
    } 
    return '<span class="' + colorClass + '">'+letter+'</span>'; 
} 
var text = $("#typed-strings").html().replace(/\w/g, wrapTheLetter); 
$("#typed-strings").html(text);