javascript - .wrap() 元素内数组中的单词

Question

我通过 PHP 从服务器提取信息并将其显示在 <pre> 中标签。我的问题是我试图在一组文本中找到一个单词并将其用 <span style="color:red;"></span> 括起来.

这是我正在使用的代码:

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

我尝试使用(替换上面注释掉的代码):

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

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

我也尝试过.html()但这显然行不通。

JSFiddle Demo

请停下来

Answer 1

问题是您正在尝试对字符串使用 jQuery 方法。由于您在此处拆分文本，因此还有另一种方法。您可以在标识符处将其拆分，然后使用 HTML 部分重新制作。

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>

或者修复你的方法

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(' '))

注意:这里的另一个问题是你的方式是万一识别词有 、 或 。 它不会工作。