CODEWITHSUNDEEP
javascriptjqueryhtml
Brian Sargent
Brian Sargent

Reputation: 89

find text in all h2 + span from other page and append to different page using jquery

I'm building an add-on for a simple HTML game. On one page I'd like to display some items from a different page for easier gameplay. I'm using get to grab the HTML from the other page and then find() to get the h2 > spans containing the text. Unfortunately, not only is it only grabbing the first h2 + span combo but, it's also displaying the HTML tags of an additional span inside the first one. There are several h2 > spans on the page for different cities the players visit and If possible I'd like to only grab the ones containing the text you have

The HTML from one of the h2 elements from the page I'm grabbing values from is:

<h2>Planet X      
    <span style="margin-left:11px; font-size:12px;">
      You have 
       <span style="font-size:20px;">3</span>Small Keys                      
    </span>
</h2>

I've left the html in it's messy state so you can see all the extra white space/tabs that need to be trimmed. My code so far is below:

if (document.URL.indexOf("missions.game") >= 0)
{
var missionstuff = document.getElementsByClassName("row")[0];
missionstuff.insertAdjacentHTML('beforebegin', ''+
'<div id="missionbits"><span id="missionstuff"></span></div>');

    $(function(){
    $.get('https://www.heroesrisinggame.com/game/vills.game', function(result){
        var obj = $(result).find("h2 span");
        $(this).append($('#missionstuff').text(obj.html().trim()));
    });
});
}

Thank you in advance!

Upvotes: 0

Views: 766

Answers (3)

Greedo
Greedo

Reputation: 3559

Change obj.html() to obj.text()

Edit: This is due to the selector: $("h2 span") will select both the span, so it will show the text of the first span (You have 3 Small Keys) followed by the one of the second span (3). In order to solve the issue, select only the parent span, for example by adding a custom class to it. 

$("h2 span").first()

Will do the job

Upvotes: 1

Chase Ingebritson
Chase Ingebritson

Reputation: 1579

In this case, you'll just have to use .html() in place of .text().

var missionstuff = document.getElementsByClassName("row")[0];
missionstuff.insertAdjacentHTML('beforebegin', '' + '<div id="missionbits"><span id="missionstuff"></span></div>');

var obj = $(document).find("h2 span");
$(this).append($('#missionstuff').html(obj.html()));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Planet X
  <span style="margin-left:11px; font-size:12px;">You have <span style="font-size:20px;">3</span> Small Keys</span>
</h2>

<div class="row"></div>

If you would like to only find the items that contain "You have", you can use .textContent.contains() to compare the value of a given node to a specific string.

var missionstuff = document.getElementsByClassName("row")[0];
missionstuff.insertAdjacentHTML('beforebegin', '' + '<div id="missionbits"><span id="missionstuff"></span></div>');

var container = $('#missionstuff')
var obj = $(document).find("h2 span");

let filteredItems = Object.values(obj).filter(item => {
  if (item.textContent) {
    return item.textContent.includes('You have')
  }
})

filteredItems.forEach((item) => {
  let output = item.cloneNode(true)
  container.append(output)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Planet X
  <span style="margin-left:11px; font-size:12px;">You have <span style="font-size:20px;">3</span> Small Keys</span>
  <span style="margin-left:11px; font-size:12px;">You have <span style="font-size:20px;">5</span> Small Hats</span>
</h2>


<div class="row"></div>

Upvotes: 0

cssyphus
cssyphus

Reputation: 40086

Perhaps if you take a different approach.

Instead of retrieving the full HTML page, you could instead use javascript localStorage to your advantage.

There are generally three methods to exchange data between web pages: forms (archaic), localStorage and AJAX. For your purposes, either of the last two would be fine. The difference between them is that localStorage is stored locally, on the user's own machine, while AJAX communicates with the server (useful for retrieving data saved on the server, either in a file or in a database).

LocalStorage is dead simple:

// Store
uname = "Bob"
localStorage.setItem("username", uname);

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("username");

Basically, you save some data under a name -- so it is exactly like saving a variable.

Using json.stringify, you also can save objects in localStorage, so LOTS of data can be saved efficiently.

The idea here being that you would use localStorage during user gameplay on page1 to update the localStorage variables, and retrieve them on page2 to provide the needed information.

References:

https://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/

https://www.w3schools.com/html/html5_webstorage.asp

Upvotes: 1

Related Questions