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