在字符'？'之后修剪字符串 getElementsByClassName不起作用

Question

Tidying URLs displaying in a dynamically populated list; have managed to remove full domain from beginning but now need to trim all characters after '?' for all results. getElementsByClassName is not working for me, and I cannot figure out why.

CodePen Snippet

Using:

var oldURL = "some?text";
// var oldURL = document.getElementsByClassName("slimBreadcrumb");
oldURL = oldURL.substring(0, oldURL.indexOf("?"));
document.write(oldURL);

and:

var styleBreadcrumb = document.getElementsByClassName("slimBreadcrumb");
  for (var i = 0; i < styleBreadcrumb.length; i++) {
    var str = styleBreadcrumb[i].innerHTML;
    var text = str
      .replace(/http:|https:/, "")
      .replace(/\/\//g, "")
      .replace("www.google.com/", "")
      .replace(/\//g, " > ")
      .replace(/-/g, " ");
    styleBreadcrumb[i].innerHTML = text;
  }

on:

<div>
  <ul>
    <li>
      <a class="slimBreadcrumb" href="http://www.google.com">http://www.google.com/apples/before?after-asdfstrwggs-adf?fadsfad</a>
    </li>
    <li>
      <a class="slimBreadcrumb" href="#">http://www.google.com/apples/oranges/peaches/pears</a>
    </li>
    <li>
      <a class="slimBreadcrumb" href="#">https://www.google.com/apples/oranges/peaches/pears</a>
    </li>
    <li>
      <a class="slimBreadcrumb" href="#">http://www.google.com/apples/oranges/peaches/pears-watermelons-apricots</a>
    </li>
    <li>
      <a class="slimBreadcrumb" href="#">http://www.google.com/apples/before?after-asdfstrwggs-adf?fadsfad</a>
    </li>
  </ul>
    <script type="text/JavaScript">
    </script>
</div>

Answer 1

Like this?

 var styleBreadcrumb = document.getElementsByClassName("slimBreadcrumb"); for (var i = 0; i < styleBreadcrumb.length; i++) { var str = styleBreadcrumb[i].innerText.trim(); var text = str .replace(/http:|https:/, "") .replace(/\\/\\//g, "") .replace("www.google.com/", "") .replace(/\\//g, " > ") .replace(/-/g, " "); text = text.split('?')[0]; styleBreadcrumb[i].innerHTML = text; } 

 <div> <ul> <li> <a class="slimBreadcrumb" href="http://www.google.com">http://www.google.com/apples/before?after-asdfstrwggs-adf?fadsfad</a> </li> <li> <a class="slimBreadcrumb" href="#">http://www.google.com/apples/oranges/peaches/pears</a> </li> <li> <a class="slimBreadcrumb" href="#">https://www.google.com/apples/oranges/peaches/pears</a> </li> <li> <a class="slimBreadcrumb" href="#">http://www.google.com/apples/oranges/peaches/pears-watermelons-apricots</a> </li> <li> <a class="slimBreadcrumb" href="#">http://www.google.com/apples/before?after-asdfstrwggs-adf?fadsfad</a> </li> </ul> </div>