Jquery - 在字符串中查找一个单词并用 <span> 标签包装它

Jquery - Find a word in a string and wrap it with <span> tag

本文关键字：span 包装 标签 单词 一个 字符串 查找 Jquery      更新时间：2023-09-26

我需要编写一个函数，将一个单词作为arg，在字符串中找到它，并仅使用jQuery/JS突出显示该单词。

jsfiddle.net/xzh2qmcd/

我已经在这里得到了这个词并得到了索引，但我不知道如何仅在这个词出现的地方添加一个 span 标签。

任何帮助我们都很棒，我在这里检查了一些其他问题，但不明白我应该怎么做。

你需要这样做：

    var txt = textDiv.replace(new RegExp(searchInput, 'gi'), function(str) {
      return "<span class='highlight'>" + str + "</span>"
    });

或

var txt = textDiv.replace(
                  new RegExp(searchInput, 'gi'), 
                  "<span class='highlight'>$&</span>");

gi ->所有不区分大小写的匹配文本

$(document).ready(function() {
  // globals
  var searchInput;
  var textDiv;
  $('.searchBtn').click(function(event) {
    event.preventDefault();
    // set the values of the search and the text
    searchInput = $('.searchInput').val();
    textDiv = $('.textDiv').text();
    var reg = new RegExp(searchInput, 'gi');
    var txt = textDiv.replace(reg, function(str) {
      return "<span class='highlight'>" + str + "</span>"
    });
    $('.textDiv').html(txt);
  });
});
.textDiv {
  height: 100px;
  width: 500px;
  text-align: center;
  padding: 20px;
  margin: 0 auto;
}
.highlight {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="main">
    <div class="searchDiv">
      <h3> Mask A Word In The Text: </h3>
      <label>
        <input class="searchInput" type="text" value = "iS"/> </label>
      <button class="searchBtn" type="button"> Search </button>
    </div>
    <div class="textDiv">
      Bastille Day is the common name given in English-speaking countries to the French National Day, which is celebrated on 14 July each year. In France, it is formally called La fête nationale (French pronunciation: ​[la fɛːt nasjɔnal]; The National Celebration) IS Is
      and commonly Le quatorze juillet. (French pronunciation: ​[lə katɔʁz(ə) ʒɥijɛ]; the fourteenth of July).
    </div>
  </div>
</div>

$(document).ready(function() {
   // globals
   var searchInput;
   var textDiv;
   $('.searchBtn').click(function(event) {
      event.preventDefault();
      // set the values of the search and the text
      searchInput = $('.searchInput').val();
      textOfDiv = $('.textDiv').text();
      // search for the input in the paragraph
      if (textOfDiv.indexOf(searchInput) >= 0) {
         console.log("match");
					var newText = textOfDiv.split(searchInput).join('<span class="highlight">' + searchInput + '</span>' );
$('.textDiv').html(newText);
}
      else {
         console.log("no match");
      }
   });
});
.textDiv {
    height:100px;
    width:500px;
    text-align:center;
    padding:20px;
    margin:0 auto;
}
.highlight {
    background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="main">
        <div class="searchDiv">
                    <h3> Mask A Word In The Text: </h3>
                    <label> <input class="searchInput" type="text" /> </label>
                    <button class="searchBtn" type="button"> Search </button>
        </div>
        <div class="textDiv">
                Bastille Day is the common name given in
                English-speaking countries to the French National Day,
                which is celebrated on 14 July each year. In France,
                it is formally called La fête nationale (French pronunciation: ​[la fɛːt nasjɔnal]; The National Celebration)
                and commonly Le quatorze juillet.
                (French pronunciation: ​[lə katɔʁz(ə) ʒɥijɛ]; the fourteenth of July).
        </div>
    </div>
</div>

$(document).ready(function() {
   // globals
   var searchInput;
   var textDiv;
   $('.searchBtn').click(function(event) {
      event.preventDefault();
      // set the values of the search and the text
      searchInput = $('.searchInput').val();
      textOfDiv = $('.textDiv').text();
      // search for the input in the paragraph
      if (textOfDiv.toLowerCase().indexOf(searchInput) >= 0) {
         console.log("match");
		  var newText = textOfDiv.split(searchInput).join('<span class="highlight">' + searchInput + '</span>' );
$('.textDiv').html(newText);
}
      else {
         console.log("no match");
      }
   });
});
.textDiv {
    height:100px;
    width:500px;
    text-align:center;
    padding:20px;
    margin:0 auto;
}
.highlight {
    background:red;
}
<div class="container">
    <div class="main">
        <div class="searchDiv">
                    <h3> Mask A Word In The Text: </h3>
                    <label> <input class="searchInput" type="text" /> </label>
                    <button class="searchBtn" type="button"> Search </button>
        </div>
        <div class="textDiv">
                Bastille Day is the common name given in
                English-speaking countries to the French National Day,
                which is celebrated on 14 July each year. In France,
                it is formally called La fête nationale (French pronunciation: ​[la fɛːt nasjɔnal]; The National Celebration)
                and commonly Le quatorze juillet.
                (French pronunciation: ​[lə katɔʁz(ə) ʒɥijɛ]; the fourteenth of July).
        </div>
    </div>
</div>

您可以使用以下代码实现所需的目标。

我已经更新了我的答案以提供完整的单词匹配。我想你只会寻找那个。

示例：如果您搜索国家，那么它不应该为国家单词着色，如果您不进行完整的单词搜索，就会发生这种情况。

// search for the input in the paragraph
      if (textDiv.toLowerCase().indexOf(searchInput.toLowerCase()) >= 0) {
         console.log("match");
         textDiv = textDiv.replace(new RegExp('''b('+searchInput+')''b', 'gi'),'<span class="highlight">$1</span>');

       $('.textDiv').html(textDiv);

小提琴：http://jsfiddle.net/xzh2qmcd/3/

相关文章：