.wrap（）元素中数组的一个单词

I'm pulling information from a server via PHP and displaying it within a <pre> tag. My problem is that I'm trying to find a word within a set of text and wrap it with <span style="color:red;"></span>.

Here is the code I'm been working with:

var total = $("pre").text().split(' ');
for (var i = 0; i < total.length; ++i) {
  if (total[i].toUpperCase() == $("#identifiedWord").text().toUpperCase()) {
    console.log("Found " + total[i] + " at " + i);
    // .wrap('<span style="color:red;"></span>');
  }
}

I've tried using (in replacement of the commented out code above):

total[i].wrap('<span style="color:red;"></span>');

$("pre").text().split(" ")[i].wrap('<span style="color:red;"></span>');

I've also tried .html() but that obviously didn't work.

JSFiddle Demo

Halp pls

The problem is that you are trying to use a jQuery method on a string. Since you are splitting the text here is another way to do it. You split it at the identifier and then remake it with the HTML part.

var i = $('#identifier').text();
$("pre").html(function () {
    return this.innerHTML.split(i).join('<span style="color:red;">' + i + '</span>');
}); 

var i = $('#identifier').text();

$("pre").html(function() {
  return this.innerHTML.split(i).join('<span style="color:red;">' + i + '</span>');
});

pre {
  white-space: pre-line;
  word-break: break-word;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue pellentesque nunc at cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut nisl malesuada, laoreet eros quis, pretium dui. Integer dignissim consequat magna, sed lobortis Praesent ligula hendrerit at. Phasellus blandit nibh et rhoncus tincidunt. Fusce cursus semper quam, non tempus ex maximus eu. Phasellus imperdiet fermentum ligula, nec graviPraesentda massa sodales quis. Integer id leo ipsum. Suspendisse potenti. Vestibulum vulputate, odio vel molestie Praesent egestas, purus felis ullamcorper libero, Praesent sit amet luctus turpis ante sit amet dolor.</pre>

<div style="display: none;" id="identifier">Praesent</div>

Or fixing your method

var total = $("pre").text().split(" ");
for (var i = 0; i < total.length; ++i) {
    if (total[i].toUpperCase() === $("#identifier").text().toUpperCase()) {
        total[i] = '<span style="color:red;">' + total[i] + '</span>'; 
          // just replace the text
    }
}

$('pre').html(total.join(' '))

Note: another problem here is with your way is in case the identifying word has a , or . it won't work.

</div>