SoFunction
Updated on 2025-03-03

Implement the style replacement function of LI under UL based on regular expressions

This article describes the style replacement function of LI under UL based on regular expressions. Share it for your reference, as follows:

First of all, I thought of it. I was filled under UL and found that the result was unsatisfactory and did not really change the style:

$("#UlContent li").each(function (index) {
  // alert(index + ': ' + $(this).text());
  var text = $(this).text();
  var regExp = new RegExp($("#search_content").val(), 'g');
  var newText = (regExp,"&lt;span style=\"background-color:red;\"&gt;" + $("#search_content").val() + "</span>");//Replace the found keyword with the highlight attribute; $(this).text(newText);//Update the article;});

In fact, it should be replaced before filling into UL:

$("#search_content").keyup(function () {
  if(CheckChinese($("#search_content").val()))
  {
   $.ajax({
    type: "POST",
    anync: true,
    url: "",
    cache: false,
    dataType: "text",
    data: { m: $("#search_content").val() },
    success: function (result) {
     $("#UlContent li").remove();
      var regExp = new RegExp($("#search_content").val(), 'g');
      var newText = (regExp,"&lt;span style=\"background-color:red;\"&gt;" + $("#search_content").val() + "</span>");//Replace the found keyword with the highlight attribute;      $("#UlContent").append(newText);
    }
   });

PS: Here are two very convenient regular expression tools for your reference:

JavaScript regular expression online testing tool:
http://tools./regex/javascript

Regular expression online generation tool:
http://tools./regex/create_reg

I hope this article will be helpful to everyone's regular expression learning.