This is my code for highlighting hashtags inside a div
<script>
$(document).ready(function (){
$('.hash').each(function() {
$(this).html($(this).text()
.replace(/#[a-z0-1A-Z]+/g, '<span style="color: red;">$&</span>'));
});
})
</script>
and this is my code for looping all the post using ajax-jquery:
function update() {
$.ajax({
type: "POST",
url: '{{ path('getData') }}',
data: {},
dataType: 'json',
success: function(response) {
var posts = "";
$.each(response, function(index, value) {
posts += '<a class="list-group-item">' +
'<h3 class="list-group-item-heading"><b>' + value.name + '</b></h3>' +
'<p class="hash list-group-item-text">' + value.content + '</p>' +
'<div style="text-align: right" >' + value.date + '</div></a>';
});
$('#posts').html(posts);
},
error: function() {
}
}).success(function() {
setTimeout(function() {
update();
}, 2000);
});
}
;
now what i'm trying to do is to highlight all the items(text with hashtags) that has a 'hash' class. But my problem is, the items with hashtags in a div that is looped doesn't highlight, but with the other normal div, it's working fine. The ajax and the angular is working fine, but the script for highlighting hashtags doesn't work properly with the loops of jquery and angular. And I also tried it in my angular project, my code looks like this:
<div class="list-group">
<div ng-repeat="post in userPost" >
<a class="list-group-item">
<h3 class="list-group-item-heading"><b>{{post.name}}</b></h3>
<p class="hash">{{post.content}}</p>
<div style="text-align: right" >{{post.date}}</div>
</a>
</div>
</div>
and it's the same. I would gladly appreciate your effort in helping me with this problem.