JQuery добавить встроенный CSS в HTML-сырье

Question

У меня есть переменная string с элементом html.

var myvar = '<p>Hi, ##CandidateName## and this is your ##CandidateEmail##</p>';

Как добавить несколько встроенных стилей к тексту между ##. Я не могу изменить исходный контент, поэтому я должен использовать ##

Answer 1

Вы можете сначала получить динамические данные в переменной.

var name = ##CandidateName##; var email = ##CandidateEmail##; var myvar = '<p>Hi, <span>'+name+'</span> and this is your <span>'+ email +'</span></p>';

Answer 2

Я бы предложил вам использовать какой-то тег вместо ## - например, span. Затем вы можете использовать функцию find(), чтобы найти ваши элементы.

---

Exmaple

Если вы не можете изменить исходный текст, вы можете использовать функцию replace() с регулярным выражением для замены## с, например, span, а затем применить стили для каждого span вашего элемента.

// your element in string
var myvar = '<p>Hi, ##CandidateName## and this is your ##CandidateEmail##</p>';

// replace ## with <span></span>
myvar = myvar.replace(/\##(.*?)\##/g, "<span>$1</span>");

// introduce it as a jQuery element
var $myvar = $(myvar);

// find <span> in your element and apply styles
$myvar.find('span').css({'color':"pink"});

// place it somewhere
$('#someDiv').append($myvar);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=someDiv></div>