0
votes

Comment mettre en évidence toutes les instances de texte remplacé

J'essaie de mettre en évidence toutes les instances d'un div qui correspondent à une chaîne de texte. Voici le div:

textCurrent = textCurrent.replace(/'Lorem ipsum'/g, "<span class='highlight'>Lorem ipsum</span>");
$("div").html(textCurrent);

Je veux que la chaîne "Lorem ipsum" soit mise en surbrillance deux fois, j'utilise donc ce code:

let textCurrent = $("div").html().trim();
let text = "Lorem ipsum";
let newText = "Lorem ipsum";

textCurrent = textCurrent.replace(text, "<span class='highlight'>"+newText+"</span>");
$("div").html(textCurrent);

javascript jquery

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser .html (function) plus nouveau RegExp (modèle [ indicateurs]) :

où g : correspond à la correspondance globale; trouver toutes les correspondances plutôt que de s'arrêter après la première correspondance

L'extrait:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

.highlight {
    background-color: yellow;
}

let text = "Lorem ipsum";
let newText = "Lorem ipsum";

$("div").html(function(i, str) {
    return str.replace(new RegExp(text, 'g'), "<span class='highlight'>"+newText+"</span>");
});

0 commentaires

1
votes

vous pouvez faire comme: -

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

.highlight {
  background:yellow;
}

$(function(){
  
let textCurrent = $("div").html().trim();
let text = "Lorem ipsum";
let newText = "Lorem ipsum";
let replaceText = "<span class='highlight'>"+newText+"</span>";
  
textCurrent = textCurrent.replace(new RegExp(text, 'g'), replaceText);

$("div").html(textCurrent);
  
});

0 commentaires

0
votes

en utilisant uniquement javascript

<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

.red {
  color: red;
}

const t = document.querySelector(".text");

t.innerHTML = t.innerText.replace(/ipsum/g, match => `<span class="red">${match}</span>`);

0 commentaires