Question

问题：

我当前的代码仅在找到的第一个匹配子字符串上分割。我希望它拆分并向每个匹配的子字符串添加一个span标签。这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.js" integrity="sha256-3BMRAc+yX0neFRvyfGGfd3aZK8NKwYTOzq93ubNY2iU=" crossorigin="anonymous"></script>

<div #chart id="chart"></div>

$('#orderhighlight').each(function() {
                console.log($(this).html());
                var textclean = $(this).html().replace(/<br ?\/?>/g, ' <br /> ');		    
                $(this).html(textclean);
                console.log($(this).html());

                var text = $(this).html().replace(/ +(?= )/g,'');        
                $(this).html(text);
});

$('#rechighlight').each(function() {
                console.log($(this).html());
                var texttwo = $(this).html().replace(/<br ?\/?>/g, ' <br /> ');		    
                $(this).html(texttwo);
});	


var one = $('#orderhighlight').html().split(' ');				
var two = $('#rechighlight').html().split(' ');
one.forEach(function(w, i){
        var ind2 = two.indexOf(w);
        
        if(two.includes(one[i])){
             one[i] = "<span style='color:orange'>" + w + "</span>";
             two[ind2] = "<span style='color:orange'>" + w + "</span>";

             }  
})


$('#orderhighlight').html(one.join(' '));
$('#rechighlight').html(two.join(' '));

运行代码，然后查看输出。您会注意到接收到的第二个“ 006”实例被跳过。

尝试的解决方案：

我试图将我的<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Ordered 006 007 008 009 Received 006 006 008更改为if语句，但是我很快意识到我将不得不再进行几处更改。因此，我将while交换为split(' ')，但是它只是删除了split(' ')标签，并跳过了添加任何跨度的操作。我还检查了各个字符串，并且在拆分后似乎只是结束了字符串。那么到底是什么阻止它将跨度添加到每个子字符串呢？

Answer 1

问题在于，two数组中的每个项目只能修改one数组中的一个项目。因此，由于006中只有一个one，因此006中只能替换一个two。您几乎想到了while循环的想法；实际上，它不需要太多的重组。请参见下面的代码（为保持一致性，我还用对include大于或等于0的检查替换了对indexOf的调用，因为值-1表示未找到它）

$('#orderhighlight').each(function() {
                var textclean = $(this).html().replace(/<br ?\/?>/g, ' <br /> ');		    
                $(this).html(textclean);

                var text = $(this).html().replace(/ +(?= )/g,'');        
                $(this).html(text);
});

$('#rechighlight').each(function() {
                var texttwo = $(this).html().replace(/<br ?\/?>/g, ' <br /> ');		    
                $(this).html(texttwo);
});	


var one = $('#orderhighlight').html().split(' ');				
var two = $('#rechighlight').html().split(' ');

one.forEach(function(w, i){
        var ind2 = two.indexOf(w);
        
        if(ind2 >= 0){
             one[i] = "<span style='color:orange'>" + w + "</span>";
             while (ind2 >= 0) {
                  two[ind2] = "<span style='color:orange'>" + w + "</span>";
                  ind2 = two.indexOf(w);
             }
        }  
})


$('#orderhighlight').html(one.join(' '));
$('#rechighlight').html(two.join(' '));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> Ordered </p>
<p id="orderhighlight">006 <br> 007 <br> 008 <br> 009</p>
<br>
<p> Received </p>
<p id="rechighlight">006 <br> 006 <br> 008</p>

Drew的答案适用于这种特定情况，因为数组中只有两个006，但是此方法适用于任何数量的那些值。

Answer 2

函数indexOf总是获取字符串中指定值的第一次出现的索引，这就是您的while循环解决方案不起作用的原因（因为它每次都一直在捕捉第一次出现的情况）如果只出现两次该字符串，则可以使用lastIndexOf，您可能已经猜到了-返回字符串的最后一个索引。这是一个解决方案：

$('#orderhighlight').each(function() {
                console.log($(this).html());
                var textclean = $(this).html().replace(/<br ?\/?>/g, ' <br /> ');           
                $(this).html(textclean);
                console.log($(this).html());

                var text = $(this).html().replace(/ +(?= )/g,'');        
                $(this).html(text);
});

$('#rechighlight').each(function() {
                console.log($(this).html());
                var texttwo = $(this).html().replace(/<br ?\/?>/g, ' <br /> ');         
                $(this).html(texttwo);
}); 


var one = $('#orderhighlight').html().split(' ');               
var two = $('#rechighlight').html().split(' ');
one.forEach(function(w, i){
        var ind2 = two.indexOf(w);
        var ind3 = two.lastIndexOf(w);

        if(two.includes(one[i])){
             one[i] = "<span style='color:orange'>" + w + "</span>";
             two[ind2] = "<span style='color:orange'>" + w + "</span>";

             }
        if(two.includes(one[i])){
             one[i] = "<span style='color:orange'>" + w + "</span>";
             two[ind3] = "<span style='color:orange'>" + w + "</span>";

             }  
});


$('#orderhighlight').html(one.join(' '));
$('#rechighlight').html(two.join(' '));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> Ordered </p>
<p id="orderhighlight">006 <br> 007 <br> 008 <br> 009</p>
<br>
<p> Received </p>
<p id="rechighlight">006 <br> 006 <br> 008</p>

您可以看到，我只是简单地添加了一个步骤，以突出显示最后一次出现的情况。如果您最多要出现两次，则此方法有效。如果您打算有更多的可能出现，那么我建议您从第一次出现的点开始到字符串的末尾开始，选择w的子字符串，然后再次执行相同的评估以查看它是否仍然包含该子字符串。 / p>

按字符串拆分仅适用于第一个子字符串

2 个答案: