.wrap(）元素中数组中的一个字

.wrap() a word from an array within an element

本文关键字：一个 数组 元素 wrap      更新时间：2023-09-26

我通过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演示

请停止

问题是您试图在字符串上使用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(' '))

注意：这里的另一个问题是，如果识别词有,或.，它将不起作用。

相关文章：