Remove Double Quotes inside Popover from Dynamic Data

Question

I am using Bootstrap Popover to show summary of the Article dynamically which means that, this can have double quotes ("), single quotes ('), lot of spaces ( ) and other special characters also. Because of copy/paste content from word, online etc...

Can somebody please help me, how can I remove double quotes from my Popover Content?

PS: For demo purpose, I am giving as direct text inside data-content element. But in real this data will be triggered Dynamically from "article-description" CSS class.

MY HTML

<!-- Working -->
<article class="category-content" data-content="<div class='article-description'>Lorem Ipsum dolar sit amet</div>" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with HTML Content</article>

<!-- Not Working -->
<article class="category-content" data-content="<div class='article-description'>Lorem &nbsp;&nsp;&nbsp;&nbsp; "Test" Ipsum dolar sit amet</div>" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with Special Characters.. Eg: " (Double Quotes)</article>

MY CSS

body{margin:100px auto;text-align:center;}

.category-content{
  width:100%;
  padding:10px 0;
  text-align:center;
  background:#eee;
  cursor:pointer;
  margin-bottom:15px;
}

My Script

$(document).ready(function(){
    $('.category-content').popover({html:true});
});

JsFiddle for more explanation

:: UPDATE ::

I am able to get the html content without using data-content tag now, But still struglling to remove special characters for dynamic data.

Can somebody please help me out !

Answer 1

I'd suggest there are better ways of achieving what you're trying to do. Data attributes aren't really intended to contain HTML, and to try to do things this way will make your HTML unreadable (as well as, as you've found, being breakable by quotes).

A better, more robust approach would be to have just the content of the popover (without any HTML tags) in the data-content attribute, and use Javascript to create the popover's HTML (<div class='article-description'></div>) and insert the content.