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

Halp pls

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

注意：此处的另一个问题是，如果识别字包含,或.，则无法使用。

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

1 个答案: