CODEWITHSUNDEEP
javascriptjqueryhtml
Aidan Hall
Aidan Hall

Reputation: 11

Wrapping text in a <span> element via html.replace jquery isn't working

I'm adding text dynamically into a <p></p> element based on values of an array.

//if there's more than one of the same value in an array 'scores'
if (scores.filter(item => item == scores_max).length > 1) {
  similar = [];
  document.getElementById('num_cond').textContent += ' So does';

  //then create an array 'similar' with those values

  for (var i = scores.length - 1; i > max_index; i--) {
    if (scores[i] == scores_max) {
      similar.push(premierleagueteams[i].name)
    }
  };

  //loop through values of that array and add them as text into the element

  for (var i = similar.length - 1; i >= 0; i--) {
    document.getElementById('num_cond').textContent += ' ' + similar[i];
  };

I then want to wrap those values in a <span></span> element so I'm using this:

for (var i = similar.length - 1; i >= 0; i--) {

 $("#num_cond").html(function(i, html) {
    return html.replace(similar[i], '<span class="team-color">' + similar[i] + '</span>');
  });
};

But it's not working, the text is added in fine, but for some reason this final loop isn't wrapping the elements in a span.

Edit: I should have specified, but when I type that last 'for' loop:

for (var i = similar.length - 1; i >= 0; i--) {

 $("#num_cond").html(function(i, html) {
    return html.replace(similar[i], '<span class="team-color">' + similar[i] + '</span>');
  });
};

into the console directly it works fine, but for some reason just running the program doesn't insert the span element.

HTML running the program: 

<p id="num_cond">Everton meets 5 of your conditions. So does Leicester City.</p>

HTML after typing the for loop into the console:

<p id="num_cond">Everton meets 5 of your conditions. So does <span class="team-color">Leicester City</span>.</p>

Upvotes: 0

Views: 105

Answers (2)

Pietro Nadalini
Pietro Nadalini

Reputation: 1800

Instead of using the replace, you can instead use wrap to:

Wrap an HTML structure around each element in the set of matched elements.

I've made an example on how to use it, you can adapt it to your code (since I don't know how your HTML is structured)

 $("#num_cond").wrap('<span class="team-color"></span>' );
.team-color {
  background-color: red;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="num_cond">text</p>

UPDATE (to fit the OP requirements)

Ok, so .html() returns the html content inside the element you're selecting with jquery. So when you modify the function you're only modifying what the .html() method returns. Not the content inside the element you're selecting.

With that being said, to modify the content inside of the element you selected with jquery, you need to place the content you want inside of the .html parenthesis like $('#divId').html("my new content inside the div")

.html() documentation

So I made an example of what you need to place inside your for so it modifies the html content. Note that $& places the matched substring (similar[i] in this case).

.replace() documentation

var similar = ['Leicester City'];

for (var i = 0; i < similar.length; i++) {
  $("#num_cond").html($("#num_cond").html().replace(similar[i], '<span class="team-color"> $& </span>'));
}
.team-color {
  background-color: aqua;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="num_cond">Everton meets 5 of your conditions. So does Leicester City.</p>

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55750

Why not embed the span tags when you are iterating over similar array. Also cache your selector instead of querying the DOM for every iteration.

var $elem = document.getElementById('num_cond');
for (var i = similar.length - 1; i >= 0; i--) {
   elem.textContent += ' <span class="team-color">' + similar[i] + '</span>';        
};`

or

var $elem = document.getElementById('num_cond');
for (var i = similar.length - 1; i >= 0; i--) {
   elem.textContent += ` <span class="team-color">${similar[i]}</span>`;        
 };`

Upvotes: 0

Related Questions