文字 '？'の後に文字列をトリムします。 getElementsByClassNameが機能しません。

Question

動的に入力されたリストにURLを表示しています。最初からフルドメインを削除することができましたが、今度は '？'の後にすべての文字をトリムする必要があります。すべての結果getElementsByClassNameは私のために働いていません、なぜ私は理解できません。

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

と：使用

CodePen Snippet

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; 
    } 

を上：

<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

このような？

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>