JQuery，如果在var数组中找到并替换文本答案

【问题标题】：JQuery, Find and replace text if found in a var arrayJQuery，如果在var数组中找到并替换文本
【发布时间】：2018-05-10 12:56:50
【问题描述】：

我们的网站有一个提要，它没有将产品品牌和产品名称与产品标题分开：

<div class="productTitle">Brand 1 Product Name</div>

我们想要分离品牌，以便我们可以将它包装在它自己的 div 中并设置不同的样式：

<div class="productTitle"><div class="brandName">Brand 1</div> Product Name</div>

有一个可用的过滤器列表（您可以过滤品牌），其中包含所有品牌名称。

所以我一直在尝试做的是从列表中的每个项目中获取所有文本：

<ul class="filters">
    <li>Brand 1</li>
    <li>Brand 2</li>
    <li>Brand 3</li>
    <li>Brand 4</li>
</ul>

将它们存储为一个数组，然后如果在产品标题文本中找到数组中的任何项目，则将该部分包装在它自己的 div 中以进行样式设置。

我已经将列表中的每个项目存储在一个数组中，但无法让它正确查看整个数组，如果它在每个产品标题中找到任何匹配的文本，则将匹配的文本换行：

var brandText =[];
$('.filters li').each(function(index, obj) {
  brandText.push($(this).text());
});




$('.productTitle').html(function (index, text) {
  this.innerHTML = text.replace(brandText, "<div class='brandName'>" + brandText + "</div>");
});

$(window).ajaxComplete(function(){
  $('.productTitle').html(function (index, text) {
    this.innerHTML = text.replace(brandText, "<div class='brandName'>" + brandText + "</div>");
  });
});

当我 console.log var brandText 时，它会在控制台中返回所有 122 个品牌，但它没有在每个产品标题（通常每页 60 个产品）中找到文本并将该文本换行。

有人可以帮忙吗？

谢谢

【问题讨论】：

brandText 是一个数组，我认为您不能将数组传递给.replace，您需要循环数组并分别替换每个数组（不确定是否会有更有效的方法)

标签： jquery html arrays

【解决方案1】：

由于brandText 是一系列品牌，因此您必须循环浏览每个品牌。

【讨论】：

【解决方案2】：

您将不得不遍历 brandText 数组并替换所有出现（如果存在）。像这样就足够了：

$('.productTitle').html(function(index, text) {
    brandText.forEach(function(brand) {
        text = text.replace(brand, "<div class='brandName'>" + brand + "</div>");
    });
    return text;
});

请参阅下面的概念验证：

$(function() {
  var brandText = [];
  $('.filters li').each(function(index, obj) {
    brandText.push($(this).text());
  });

  $('.productTitle').html(function(index, text) {
    brandText.forEach(function(brand) {
      text = text.replace(brand, "<div class='brandName'>" + brand + "</div>");
    });
    return text;
  });
});

.brandName {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
  <li>Brand 1</li>
  <li>Brand 2</li>
  <li>Brand 3</li>
  <li>Brand 4</li>
</ul>

<div class="productTitle">Brand 1 Product Name</div>
<div class="productTitle">Brand 2 Product Name</div>
<div class="productTitle">Brand 3 Product Name</div>
<div class="productTitle">Brand 4 Product Name</div>

额外优化：

您可以使用.map()创建初始数组，即：

var brandText = $('.filters li').map(function() {
    return $(this).text();
});

将整个替换逻辑抽象到一个方法中，这样您只需在 AJAX 完成时调用该方法（而不必复制您的代码）

var replaceBrandText = function() {
  $('.productTitle').html(function(index, text) {
    brandText.forEach(function(brand) {
      text = text.replace(brand, "<div class='brandName'>" + brand + "</div>");
    });
    return text;
  });
};

// Replace on DOM ready (at runtime)
replaceBrandText();

// Replace on AJAX complete
$(window).ajaxComplete(function(){
  replaceBrandText();
});

【讨论】：