If my text has some formatting tags (<bold> for example), the formatted text is stripped off.

my $html = '<ul><div class="txt" style="position:absolute; left:84px; 
+top:73px;"><span id="f1" style="font-size:11px;vertical-align:baselin
+e;color:rgba(0,0,0,1);">technology of S2S translation, <b>also</b> kn
+own as Spoken Language Translation (SLT),</span></div><div class="txt
+" style="position:absolute; left:44px; top:73px;"><span id="f1" style
+="font-size:11px;vertical-align:baseline;color:rgba(0,0,0,1);">is a n
+ew application of AI,</span></div><li>there</li><li>everyone</li></ul
+>
';
[download]

Becoming:

<ul><div class="txt" style="position:absolute; left:84px; top:73px;">t
+echnology of S2S translation,  known as Derp! Language Translation (S
+LT),</div><div class="txt" style="position:absolute; left:44px; top:7
+3px;"><span id="f1" style="font-size:11px;vertical-align:baseline;col
+or:rgba(0,0,0,1);">is a new application of AI,</span></div><li>there<
+/li><li>everyone</li></ul>
[download]

I am starting to realize that my task is more difficult than I thought at first... but working on

2020-03-11 Athanasius fixed over-wide display of code.

This doesn't seem to be the case:

#!/usr/bin/perl
use strict;
use warnings;
use feature 'say';
use Mojo::DOM;

my $html = '<ul><div class="txt" style="position:absolute; left:84px; 
+top:73px;"><span id="f1" style="font-size:11px;vertical-align:baselin
+e;color:rgba(0,0,0,1);">technology of S2S translation, <b>also</b> kn
+own as <b>Spoken</b> Language Translation (SLT),</span></div><div cla
+ss="txt" style="position:absolute; left:44px; top:73px;"><span id="f1
+" style="font-size:11px;vertical-align:baseline;color:rgba(0,0,0,1);"
+>is a new application of AI,</span></div><li>there</li><li>everyone</
+li></ul>
';

my $dom = Mojo::DOM->new( $html );

$dom->find('span')->each( sub { $_->content( $_->content =~ s/Spoken/D
+erp/r ) } );
say $dom->content;
[download]

Output:

<ul><div class="txt" style="position:absolute; left:84px; top:73px;"><
+span id="f1" style="font-size:11px;vertical-align:baseline;color:rgba
+(0,0,0,1);">technology of S2S translation, <b>also</b> known as <b>De
+rp</b> Language Translation (SLT),</span></div><div class="txt" style
+="position:absolute; left:44px; top:73px;"><span id="f1" style="font-
+size:11px;vertical-align:baseline;color:rgba(0,0,0,1);">is a new appl
+ication of AI,</span></div><li>there</li><li>everyone</li></ul>
[download]

The <b></b> tags around 'also' are still there, and replacing 'Spoken' with 'Derp' also maintains the associated <b></b> tags. Perhaps you've altered some code?

I was using your first code which has $id->text instead of $id->content. Using "content" made the trick.

I am using the first script because of the nice loop. My final goal is to wrap the matching string(s) between tags (a simple replacement of match with tag+match+tag should do it). The hard part is that I need to match n-grams that possibly are split between two nodes (end of 1st node and begin of next one), with the loop I may find some working solution (my idea is to scan a window of two nodes at a time). Why this? Because I am parsing the output of pdftohtml which splits natural language sentences into lines, each line wrapped in its own tags. In the example above, it could be that I need to match the 2-gram "Translation is", which is in 2 adjacent DOMs. This is quite challenging (at least for my 0-parsing-abilities), but you have brought me near my goal. So time to play now.

Edit

Just for the sake of experimenting/learning, I tried with these two HTML snippets:

my $html = '<ul><div class="txt" style="position:absolute; left:84px; 
+top:73px;"><span id="f1" style="font-size:11px;vertical-align:baselin
+e;color:rgba(0,0,0,1);">technology of S2S translation, <b>also</b> kn
+own as Spoken Language Translation (SLT),</span></div><div class="txt
+" style="position:absolute; left:44px; top:73px;"><span id="f1" style
+="font-size:11px;vertical-align:baseline;color:rgba(0,0,0,1);">is a n
+ew application of AI,</span></div><li>there</li><li>everyone</li></ul
+>
';

my $html = '<ul><div class="txt" style="position:absolute; left:84px; 
+top:73px;"><span id="f1" style="font-size:11px;vertical-align:baselin
+e;color:rgba(0,0,0,1);">technology of S2S translation, <b>also</b> kn
+own as <p>Spoken</p> Language Translation (SLT),</span></div><div cla
+ss="txt" style="position:absolute; left:44px; top:73px;"><span id="f1
+" style="font-size:11px;vertical-align:baseline;color:rgba(0,0,0,1);"
+>is a new application of AI,</span></div><li>there</li><li>everyone</
+li></ul>
';
[download]

With the first HTML, using your first script with $id->text, <b>also</b> is not shown, with the second yes. I do not see any rational behind it...

Post a few edge cases of the data you're working with and I'll take a look later on.