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)

demo: http://jsfiddle.net/nishan152/ptwmjcep/

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>";         });     }); }); 

demo


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -