Javascript in SharePoint Online not working

Question

I use the Modern Script Web Part to inject JavaScript into my site. I want to modify div elements by className with JavaScript. The script is running on my local PC but when I try to run it in SharePoint it doesn't work.

I want to disappear all div where a "#" is inside. But in SharePoint I don't get any element. But I can see the div elements in the source code of the page.

<script language="JavaScript">
window.onload = function() {
var myElements = document.getElementsByClassName('pnp-persona');
alert(myElements.length);
for(var i=0; i<myElements.length; i++){
    if (myElements[i].innerHTML.indexOf("#")!==-1) {
    document.getElementsByClassName('pnp-persona')[i].style.display='none';
    }
}
}

This is like something I have in a Web Part as HTML structure:

<div class="pnpRefinersTemplatePersona_9c35c9d6">
  <div>
    <div class="ms-Persona ms-Persona--size40 pnp-persona root-245">
      <div class="ms-Persona-coin ms-Persona--size40 coin-252">
        <div class="ms-Persona-imageArea imageArea-254">
          <div class="ms-Persona-initials initials-257" aria-hidden="true">
            <span>T</span>
          </div>
        </div>
      </div>
      <div class="ms-Persona-details details-246">
        <div dir="auto" class="ms-Persona-primaryText primaryText-247">
          <div class="ms-TooltipHost root-260">;#Test;# (1)</div>
        </div>
        <div
          dir="auto"
          class="ms-Persona-secondaryText secondaryText-248"
        ></div>
        <div dir="auto" class="ms-Persona-tertiaryText tertiaryText-249"></div>
        <div dir="auto" class="ms-Persona-optionalText optionalText-250"></div>
      </div>
    </div>
    <div class="ms-Persona ms-Persona--size40 pnp-persona root-245">
      <div class="ms-Persona-coin ms-Persona--size40 coin-252">
        <div class="ms-Persona-imageArea imageArea-254">
          <div class="ms-Persona-initials initials-270" aria-hidden="true">
            <span>E</span>
          </div>
        </div>
      </div>
      <div class="ms-Persona-details details-246">
        <div dir="auto" class="ms-Persona-primaryText primaryText-247">
          <div class="ms-TooltipHost root-260">Test</div>
        </div>
        <div
          dir="auto"
          class="ms-Persona-secondaryText secondaryText-248"
        ></div>
        <div dir="auto" class="ms-Persona-tertiaryText tertiaryText-249"></div>
        <div dir="auto" class="ms-Persona-optionalText optionalText-250"></div>
      </div>
    </div>
    <div class="ms-Persona ms-Persona--size40 pnp-persona root-245">
      <div class="ms-Persona-coin ms-Persona--size40 coin-252">
        <div class="ms-Persona-imageArea imageArea-254">
          <div class="ms-Persona-initials initials-271" aria-hidden="true">
            <span>CI</span>
          </div>
        </div>
      </div>
      <div class="ms-Persona-details details-246">
        <div dir="auto" class="ms-Persona-primaryText primaryText-247">
          <div class="ms-TooltipHost root-260">Test</div>
        </div>
        <div
          dir="auto"
          class="ms-Persona-secondaryText secondaryText-248"
        ></div>
        <div dir="auto" class="ms-Persona-tertiaryText tertiaryText-249"></div>
        <div dir="auto" class="ms-Persona-optionalText optionalText-250"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

I tried your script it's working fine. I see only ending script tag is missing in the above code. Not sure if you have missed it in SharePoint site page. did you try in different browser and see.

If this is not the case, share sample div blocks how they look from view source.

<h1>hello world!</h1>
<div class="pnp-persona">hello ## world</div>
<script language="JavaScript">
window.onload = function() {
var myElements = document.getElementsByClassName('pnp-persona');
alert(myElements.length);
for(var i=0; i<myElements.length; i++){
    if (myElements[i].innerHTML.indexOf("#")!==-1) {
    document.getElementsByClassName('pnp-persona')[i].style.display='none';
    }
}
}</script>

I tried with jQuery, you can give a try.

<script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".pnp-persona").each(function(){
            if($(this).text().match('#')) {
                $(this).hide();
            };
           });

});
</script>

Answer 2

I found out that SharePoint Online use TypeScript strictly. It must be defined each variable before with a type like this:

var myElements: any;
var countElements: any;
var myElement: any;
var i: number;