DUVIDA - Replacing texts with Javascript

Asked

Viewed 70 times

2

Well, I’m setting up a chat system in Delphi in which I use the Chromium component to load an HTML that I use as the chat history due to lack of visual components in it.

inserir a descrição da imagem aqui

Anyway, in the messages balloons it is possible to notice that old confirmation "V" that is nothing more than the following code:

<i class="material-icons readStatus">done</i>

That is, when the sender visualizes the message, I need to change all "done" to "done_all". I researched a lot and found nothing related to change several texts already printed in HTML, I even found a function that I believed would solve my problem, but for some reason it is not working.

function replaceText(selector, text, newText, flags) {
 var matcher = new RegExp(text, flags);
 var elems = document.querySelectorAll(selector), i;

 for (i = 0; i < elems.length; i++)
  if (!elems[i].childNodes.length)
   elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}

function readStatusIcon(oldStatus, newStatus) {
 replaceText('*', oldStatus, newStatus, 'g');
}

## Nessa função "readStatusIcon" eu passo ">done<" e ">done_all<" pelo ##
## Delphi para ele não se confundir com outra parte do código ##

<section class="mainApp">
 <div class="rightPanel">
  <div class="convHistory userBg">
   <!-- CONVERSATION GOES HERE! -->
   <msg></msg>
   <div class="msg messageSent">
    EAE
    <i class="material-icons readStatus">done</i>
     <span class="timestamp">10:20 AM</span>
   </div>
   <div class="msg messageSent">
    EAE
    <i class="material-icons readStatus">done</i>
     <span class="timestamp">10:20 AM</span>
   </div>
   <div class="msg messageSent">
    EAE
    <i class="material-icons readStatus">done</i>
     <span class="timestamp">10:20 AM</span>
   </div>
  </div>
 </div>
</section>

The code

@EDIT: Guys, it worked, it’s how our colleague Felipe responded, removing only the ! of that line if (!elems[i].childNodes.length), the problem has been solved. Thank you very much!!!

javascript html5 delphi
  • 1

    That one if (!elems[i].childNodes.length) is correct? Because he will perform the replace, rightly, in us who have no children, maybe ! solve your problem...

  • It wouldn’t just be a simple substitution? -> elems[i].textContent = "done_all";.

  • toggleClass does not work?

1 answer

0

Dude, I don’t really know what your code is but why don’t you do it like this:

replaceText('mensagens', 'done_all');

function replaceText(selector, newText) {
 var elems = document.getElementById(selector).getElementsByTagName('i');

 for (var i = 0; i < elems.length; i++)
   elems[i].textContent = newText;
}
<div id="mensagens">
  <i class="material-icons readStatus">Done</i>
  <i class="material-icons readStatus">Done</i>
  <i class="material-icons readStatus">Done</i>
  <i class="material-icons readStatus">Done</i>
  <i class="material-icons readStatus">Done</i>
</div>

Browser other questions tagged javascript html5 delphi

You are not signed in. Login or sign up in order to post.