Colorare ultima parola con javascript

[eugenioteo]

  var iframe = $('#iView');
	var elements = iframe.contents().find('.b-post__hide-when-deleted');
	  
        var html = '';
	 
      	elements.each(function(index, element) {
            html += element.innerText  + '<br>'  ;
			var el1 = document.getElementById('div-element1');
  el1.innerHTML = html
});
	 

output: matteoKarol oggi, 16:56 fuunziona
matteoKarol oggi, 16:05 ciao
matteoKarol oggi, 16:05 bentornati
matteoKarol oggi, 15:34 ciao

Salve non riesco a trovare informazioni su come colorare parte di una stringa.

[lasjorg]

You can wrap the text you want to color inside a span element and apply styles to the element.

How you would do it in JS completely depends on what you are actually trying to achieve.

<p>Some of this text should be red</p>

const paragraph = document.querySelector("p");
const words = paragraph.textContent.split(" ");

paragraph.innerHTML = words
  .map((word) =>
    word === "text" ? `<span style="color: red">${word}</span>` : word
  )
  .join(" ");

[eugenioteo]

grazie mi piace quello che hai scritto ma lavora solo fuori dal codice
io purtroppo non conosco mai in anticipo cosa ci sara scritto. il blocco html e’ questo da ripetere piu’ volte.

<div class="b-post__hide-when-deleted">
<hr class="b-divider--section">
<div class="list-item-header h-left">
<a href="https://www.bliner-key.com/member/2-matteokarol" class="avatar  h-left">
<img src="./core/customavatars/thumbs/avatar2_27.jpg" alt="matteoKarol" title="matteoKarol">
</a>
<div class="post-header h-left">
<div class="post-action-wrapper ellipsis multiline js-ellipsis-has-title">
matteoKarol
</div>
</div>
<div class="checkbox h-right">
<input class="cb_inlinemod " type="checkbox" name="node[]" value="184391">
</div>
<div class="info h-right">
<span class="post-date h-left"><time itemprop="dateCreated" datetime="2023-11-22T22:06:52">Ieri, 22:06</time></span>
</div>
</div>

<div class="js-post__content-wrapper list-item-body-wrapper h-clear" data-node-type="visitorMessage">
<div class="js-post__content list-item-body conversation-body">
<div class="post-content restore js-post__content-text h-wordwrap" itemprop="text"> 
buona notte a tutti
</div>
<div class="post-links">
</div>
</div>
<div class="b-post__footer h-hide--on-preview h-clear h-padding-bottom-m h-margin-horiz-xl">
<div class="h-clearfix">
<hr class="b-divider b-divider--post-controls">
</div>
</div>
<div class="edit-conversation-container OLD__edit-conversation-container"></div>
</div>
</div>

output matteoKarol Ieri, 22:06 buona notte a tutti

[eugenioteo]

ciao ho risolto cosi cambiando innerText in innerHTML…
tutto funziona perfettamente
grazie per il tempo speso

var iframe = $('#iView');
	var elements = iframe.contents().find('.b-post__hide-when-deleted');
	  
        var html = '';
	 
      	elements.each(function(index, element) {
            html += element.innerText  + '<br>'  ;
			var el1 = document.getElementById('div-element1');
  el1.innerHTML = html
});