时间戳

首页 > 解决方案 > 按字符串拆分仅适用于第一个子字符串

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

问题描述

问题：

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

$('#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(' '));
<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>

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

尝试的解决方案：

我试图改变我if的while声明，但我很快意识到我必须做更多的改变。所以我换了我split(' ')的，split('<br>')但它只是删除了我的<br>标签并跳过添加任何跨度。我还检查了单个字符串，它似乎只是在我拆分字符串后结束了它。那么究竟是什么阻止它向每个子字符串添加跨度呢？

标签： javascriptjqueryhtml

解决方案

问题是two数组中的每一项只能修改一项one。所以，由于只有一个006in one，所以只能006替换一个 in two。你几乎已经有了while循环的想法；它实际上不需要那么多重组。请参阅下面的代码（为了保持一致，我还用include检查indexOf是否大于或等于 0 替换了对 的调用，因为值 -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>

德鲁的答案适用于这种特定情况，因为数组中只有两个006'，但这种方法适用于任意数量的这些值。

推荐阅读