javascript - Avoid empty wrappers for same hashtags in a html label element -
i have created custom javascript/jquery code find hashtags in string appear in html label. i'm highlighting hashtags , add wrapper around them. but, if same hashtag string shows in 2 labels there's strange empty wrapper added in front of hashtag , appear in label content. how avoid empty wrapper , idea search hashtag strings or cause site loading speed?
here's code split hashtags in string , adding wrapper around them:
$(document).ready(function(event){     $status_hash = $('.hashtag').text();      var tagslistarr = $status_hash.split(' ');     var arr=[];     $.each(tagslistarr,function(i,val){         if(tagslistarr[i].indexof('#') == 0){           arr.push(tagslistarr[i]);           }     });      for($x=0; $x<=arr.length;$x++){         $(".hashtag:contains('"+arr[$x]+"')").html(function(_, html) {         return html.split(arr[$x]).join("<a href='#' class='smallcaps' style='text-decoration:none; background-color:rgba(113, 162, 252, 0.63); color:white; padding:2px 4px 2px 4px; border-radius:2px;'>"+arr[$x]+"</a>");         });     } });   jsfiddle(updated)
you not need many operations kind of wrapping or extract hash tags.
to hash tags can use one-liner:
var arr = $.grep( $('.hashtag').text().split(' '), function( v, ) {     return v.charat(0) === '#'; });   but if want wrap tags here code:
$(document).ready(function(event){     $('.hashtag').html(function(_,html) {         return html.replace(/(\#[a-z]+)/gi, function(x) {             return "<a href='#' class='smallcaps' style='text-decoration:none; background-color:rgba(113, 162, 252, 0.63); color:white; padding:2px 4px 2px 4px; border-radius:2px;'>" + x + "</a>";         });     }); });        
Comments
Post a Comment