这里有一个你可以使用的技巧：

var a = '> Kapetown > China Town >London > Washington' //get the text from document here
a = a.split('>');
a = a.join('<span class="myClass">></span>');

现在您可以替换文档中的“a”。
这只是你可以用在你的情况下的一个技巧，也许这会对你有帮助。

我假设目标div中只有文本

$(document).ready(function() {
  // get the target element
  var breadcrumbs = $('#breadcrumbs')
  // get all text of that element. Note: this will remove all
  // HTML tag and get only the text
  var str = breadcrumbs.text()
  // a regEx to find all occurrences of ">" sign
  // and wrap them with span.myClass
  var strHtml = str.replace(/\>/g, "<span class='myClass'>&gt;</span>");
  // push the replaced string back to the targeted element
  breadcrumbs.html(strHtml)
})

.myClass {
  color: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div id="breadcrumbs">> Kapetown > China Town >London > Washington</div>

如果我没理解错的话，那么你有一个特殊的HTML，如下所示：

<div id="abc">
  > Capetown > China > London > Washington
</div>

你希望它是这样的

<div id="abc">
      <span class="some-class">&gt;</span> Capetown <span class="some-class">&gt;</span> China <span class="some-class">&gt;</span> London <span class="some-class">&gt;</span> Washington
</div>

然后通过vanilla javascript，你可以通过Regex来实现这一点。下面是如果HTML像我提出的例子一样，我会怎么做：

let content = document.getElementById('abc').textContent.replace(/>/g, '<span class="some-class">&gt;</span>');
document.getElementById('abc').innerHTML = content;

1.我在这里所做的是使用document.getElementById('abc').textContent，获取<div id="abc">...</div>中的文本内容，并将此文本内容存储在可变变量content中。
1.然后我使用JavaScript的String.prototype.replace方法替换所需的字符（在我们的例子中是“〉”字符）。模式和替换字符串。read about the replace method here
1.我想选择的字符是“〉"。所以使用Regex我想匹配的模式是/>/。现在仅仅使用这个表达式将只匹配“〉"的第一个示例。所以我给予它一个全局参数来匹配/>/g中所有出现的“〉”。
1.现在我们要给予它一个类，所以我决定使用内联HTML元素<span>来避免DOM布局的任何更改，现在对于替换子字符串，我使用<span class="some-class">&gt;</span>，>是“〉”符号的HTML代码，让我们在String.prototype.replace方法中包含这两个参数content.replace(/>/g, '<span class="some-class">&gt;</span>');
1.在执行时，变量content现在包含了一个类所需的字符。接下来，我用document.getElementById('abc').innerHTML = content;替换了content变量<div id="abc">...</div>的内容。我使用了.innerHTML属性，因为我们在替换字符串中包含了一些HTML。
如果这是你想要的，那么希望这能有所帮助。

用户可以使用{'>'}进行React
示例：

<div className='row'>
   {route[0]} {'>'} {route[1]} {'>'} {route[2]}
 </div>

其中route = ["home","products","productID"];