Question

我们的网站上有一个Feed，它不会将产品品牌和产品名称与产品标题分开：

<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个产品）和包装那个文本。

有人可以帮忙吗？

由于

Answer 1

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

Answer 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();
});

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

2 个答案: