jQuery-在句子中找到一个单词并添加跨度

Question

我正在编写一个函数以在句子中查找单词并在顶部添加跨度。这是代码，但行不通。谁能指出我的错误？谢谢

  function find_and_add(element = "", findWord = "") {
      $(element).each(function() {
        var arr = $('h1 a', this).text().split(' ');
        var newTitle = "";
        $.each(arr ,function(key, value) {
          if (value == findWord) {
            newTitle += "<span>"+ value + "</span><br/>";
          } else {
            newTitle += value + " ";
          }
        });
        $("h1 a", this).html(newTitle);
      });
    }
    
    find_and_add('.wrapper', 'BMW');
    find_and_add('.wrapper', 'Toyota');
    find_and_add('.wrapper', 'Ferrari');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  
  <h1> 
     <a href="#"> Brand name BMW </a>
  </h1>
  <h1> 
     <a href="#"> Brand name Toyota </a>
  </h1>
  <h1> 
     <a href="#"> Brand name Ferrari </a>
  </h1>
 
</div>

Answer 1

您的代码有很多错误。

您需要一个dot，然后再名

find_and_add('.wrapper', 'BMW');

您正在传递父母包装纸，然后试图以一个非常复杂的方式以一群孩子的方式找到一个特定的单词。为什么不按照下面的示例传递父母和搜索词列表。

function find_and_add(element = "", findWords = "") {
      $(element).find("h1 a").each(function() {
       var $elem = $(this); 
        var arr = $elem.text().split(' ');
        var newTitle = "";
        $.each(arr ,function(key, value) {
          if (findWords.indexOf(value)>-1) {
            newTitle += "<span>"+ value + "</span><br/>";
          } else {
            newTitle += value + " ";
          }
        });
        $elem.html(newTitle);
      });
    }
    
    find_and_add('.wrapper', ['BMW','Toyota','Ferrari']);

span{
  background-color:yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  
  <h1> 
     <a href="#"> Brand name BMW </a>
  </h1>
  <h1> 
     <a href="#"> Brand name Toyota </a>
  </h1>
  <h1> 
     <a href="#"> Brand name Ferrari </a>
  </h1>
 
</div>

Answer 2

请找到用于下面问题的JSFIDDLE

https://jsfiddle.net/princedc/mg7bkeas/

我正在处理一个函数上的每件事，这将确保更好的性能。我将所有单词传递给一个函数调用。您需要更改您的替换，因为我们需要在jQuery中单独替换元素$（this）。

function find_and_add(element = "", findWord = "") {
          var lookUpWords = findWord.split(' ');
      $(element).each(function() {
        var arr = $('h1 a', this);
        //console.log(arr);
        $.each(arr ,function(key, value) {
          debugger;
            console.log(value);
          var newTitle = "";
          var words = value.text.split(' ');
          $.each(words,function(wkey,wvalue){
             if (lookUpWords.indexOf(wvalue) >= 0) {
              newTitle += "<span>"+ wvalue + "</span><br/>";
            } else {
              newTitle += wvalue + " ";
            }
          });
         $(this).html(newTitle);
        });
        //$("h1 a", this).html('').html(newTitle);
      });
    }
    find_and_add('.wrapper', 'BMW Toyota Ferrari');
    //find_and_add('.wrapper', 'Toyota');
    //find_and_add('.wrapper', 'Ferrari');