javascript - 将 JS 对象的值保存为标记

Question

是否可以将标记保存在 JS 对象上以便稍后检索？

为什么？

这是我的问题，如果描述太长，我希望能够将其分成单独的 block ，可能是不同的 HTML 标记，而不是将整个文本放在一长串单词中

即:在遍历对象之后...

 <div>{markup.description}</div>

上面会给我所有的描述数据，但我无法修改它(分成粗体、斜体、标题或跨度。)以获得更好的 UI。

因此，我在这里尝试学习的最终结果是如何生成如下内容:

const markup = [
       {
         name: "<h1>Joe Doe<h1/>",
         food: "<p>pizza<p/>",
         description: "<h1>super long description<h2><p>bla bla 
         bla</p>"   
       }
    ]

我尝试了模板字面量，但没有成功。

我知道我可以通过在对象中添加更多键来分隔文本 block ，但这感觉是多余的，因为它都是描述，此外我仍然无法为那些单词应用任何样式(添加类)需要注意在正文中间。

Answer 1

我想您总能使属性发挥作用。

const markup = [{
  name: () => "<h1>Joe Doe<h1/>",
  food: () => "<p>pizza<p/>",
  description: () => "<h1>super long description<h2><p>bla bla bla</p>"
}]

function renderMarkup(item) {
  let markup = ''
  Object.entries(item).forEach(([key, value]) => {
    markup += value()
  });
  return markup
}

$('.markup').html(renderMarkup(markup[0]))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="markup"></div>