识别div中的字符并添加类javascript

Question

我正在尝试识别div中的字符，并将其添加到所有匹配的类中。

示例：

> Kapetown > China Town >London > Washington

我想识别字符>，并给它们所有的类

我试着做这个

if (sign.indexOf("$") >= 0) {
//remove the sign
}

Answer 1

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

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

现在，您可以替换文档中的"a"。

这只是一个你可以在你的情况下使用的技巧。也许这会对你有所帮助。

Answer 2

我假设目标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>

Answer 3

如果我正确理解你的问题，那么你就有了一个特殊的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>

然后通过普通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中
2. 然后我使用JavaScript的String.prototype.replace方法来替换所需的字符(在我们的例子中是">"字符)。String.prototype.replace方法接受两个参数：模式和替换字符串。在此处阅读有关替换方法的信息
3. 我要选择的字符是">"。所以使用Regex，我想要匹配的模式是/>/。现在只使用这个表达式将只匹配">"的第一个实例。因此，我给它一个全局参数来匹配/>/g出现的所有">">
4. 现在我们要给它上课。因此，我决定使用内联HTML元素<span>来避免DOM布局中的任何更改。现在，对于替换子字符串，我使用<span class="some-class">&gt;</span>。>是">"符号的HTML代码。让我们将这两个参数作为content.replace(/>/g, '<span class="some-class">&gt;</span>');包含在我们的String.prototype.replace方法中
5. 当执行时，变量content现在包含了我们需要的带有类的字符。接下来，我将<div id="abc">...</div>的内容替换为document.getElementById('abc').innerHTML = content;的content变量。我使用了.innerHTML属性，因为我们在替换字符串中包含了一些HTML

如果这是你想要的，那么希望这会有所帮助。

Answer 4

使用可以使用{'>'}进行反应

示例：

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

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