Maison > interface Web > js tutoriel > Implémentation de la fonction de remplacement de style de LI sous UL basée sur des expressions régulières

Implémentation de la fonction de remplacement de style de LI sous UL basée sur des expressions régulières

巴扎黑
Libérer: 2017-06-16 10:30:20
original
1691 Les gens l'ont consulté

Cet article présente principalement la fonction de remplacement de style de LI sous UL basée sur des expressions régulières et implique des techniques d'implémentation associées de JavaScript utilisant des expressions régulières pour exploiter dynamiquement les attributs des éléments de page. Les amis dans le besoin peuvent s'y référer

. L'exemple de cet article décrit l'implémentation de la fonction de remplacement de style de LI sous UL basée sur des expressions régulières. Je le partage avec vous pour votre référence. Les détails sont les suivants :

J'ai d'abord pensé à le remplir sous UL, mais ensuite j'ai trouvé que le résultat n'était pas satisfaisant et que le style n'était pas vraiment changé :

$("#UlContent li").each(function (index) {
  // alert(index + ': ' + $(this).text());
  var text = $(this).text();
  var regExp = new RegExp($("#search_content").val(), 'g');
  var newText = text.replace(regExp,"<span style=\"background-color:red;\">" + $("#search_content").val() + "</span>");//将找到的关键字替换,加上highlight属性;
  $(this).text(newText);//更新文章;
});
Copier après la connexion

En fait, il faut le remplacer avant de remplir en UL :

$("#search_content").keyup(function () {
  if(CheckChinese($("#search_content").val()))
  {
   $.ajax({
    type: "POST",
    anync: true,
    url: "HelpCenterSuggestion.ashx",
    cache: false,
    dataType: "text",
    data: { m: $("#search_content").val() },
    success: function (result) {
     $("#UlContent li").remove();
      var regExp = new RegExp($("#search_content").val(), &#39;g&#39;);
      var newText = result.replace(regExp,"<span style=\"background-color:red;\">" + $("#search_content").val() + "</span>");//将找到的关键字替换,加上highlight属性;
      $("#UlContent").append(newText);
    }
   });
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal