<label>url1</label>
<textarea id="url-1"></textarea>

</br>
<label>url2</label>
<textarea id="url-2"></textarea>
</br>

<button onclick="compareUrl()" >compare</button>

<hr>
<div id="result-iso">
  <h1> Ensemble clé valeur iso dans les 2 urls</h1>
</div>
<hr>

<div id="result-key-iso">
  <h1> Ensemble clé iso dans les 2 urls avec valeurs !=</h1>
</div>
<hr>

<div id="result-not-iso-1">
  <h1> Ensemble clé de l'url 1 non existantes dans url 2</h1>
</div>

<div id="result-not-iso-2">
  <h1> Ensemble clé de l'url 2 non existantes dans url 1</h1>
</div>

<script>

  function compareUrl(){

    let url1 = document.querySelector('#url-1').value.split("?")[1]
    let url2 = document.querySelector('#url-2').value.split("?")[1]

    let arr1 = url1.split("&")
    let arr2 = url2.split("&")

    let keys1 = arr1.map(function(str) { return str.split("=")[0] })
    let keys2 = arr2.map(function(str) { return str.split("=")[0] })



    arr1.forEach(function(string) {
      let key = string.split('=')[0];
      let val = string.split('=')[1]

      if(arr2.indexOf(string) > -1){
        // key val iso
        document.querySelector('#result-iso').append(string)
        let html = document.querySelector('#result-iso').innerHTML
        document.querySelector('#result-iso').innerHTML = html + '<br>'
      } else if (  keys2.indexOf(key) > -1) {
        // key iso & val !=
        document.querySelector('#result-key-iso').append(key)
        let html = document.querySelector('#result-key-iso').innerHTML
        document.querySelector('#result-key-iso').innerHTML = `${html} ( value url 1: ${val} | value url 2: ${arr2[keys2.indexOf(key)].split('=')[1]}) <br>`;
      } else {
        // none
        document.querySelector('#result-not-iso-1').append(key)
        let html = document.querySelector('#result-not-iso-1').innerHTML
        document.querySelector('#result-not-iso-1').innerHTML = html + '<br>'
      }
    });

    arr2.forEach(function(string) {
      let key = string.split('=')[0];
      if (keys1.indexOf(key) < 0) {
        document.querySelector('#result-not-iso-2').append(key)
        let html = document.querySelector('#result-not-iso-2').innerHTML
        document.querySelector('#result-not-iso-2').innerHTML = html + '<br>'
      }});
  }
</script>