Javascript动态地格式化带有项目符号的项目列表

Question

用例

API返回一个类似于The ingredients are * apple* carrot *potato的字符串。请注意，项目符号点之间的间距通常不会保持一致。

在我要填充长字符串的元素中，我只会得到一个简短的标题和一个列表。因此，我希望列表（字符串的一部分以*开头）首先被<ul>包裹，然后让每个项目都被<li>包裹。

---

示例字符串

This is a list of sodas * Dr. Pepper *LaCroix * 7up  *sprite * Fanta * Coke Zero *Pepsi

应执行的步骤

1. 将* Dr. Pepper *LaCroix * 7up *sprite * Fanta * Coke Zero *Pepsi包裹在<ul>
中
2. 将单个项目包装在<li>
中
3. 抓住项目符号要点*以及该字符与任何字符之间的间距，然后将其删除。

所需的innerHTML输出

This is a list of sodas
<ul>
    <li>Dr. Pepper</li> 
    <li>LaCroix</li>
    <li>7up</li>  
    <li>sprite</li> 
    <li>Fanta</li> 
    <li>Coke Zero</li> 
    <li>Pepsi</li>
</ul>

---

演示

CodePen上的当前演示

Answer 1

var str = "This is a list of sodas * Dr. Pepper *LaCroix * 7up  *sprite * Fanta * Coke Zero *Pepsi";

//split string into an array using * as delimiter
var items = str.split('*');
//grab the first item since it's the title, not a soda
var title = items.shift();

//create an html string var
var html = `${title}<ul>`
//loop over remaining array elements and append to our html
items.forEach((el) => {
  html += `<li>${el.trim()}</li>`;
});
html += '</ul>';

//display as HTML
document.getElementById('target').innerHTML = html;

<div id="target"></div>

Answer 2

您可以使用正则表达式分割字符串，然后生成所需的html

const s = 'This is a list of sodas * Dr. Pepper *LaCroix * 7up  *sprite * Fanta * Coke Zero *Pepsi';

let chunks = s.split(/\ ?\*\ ?/);


const heading = chunks[0];

chunks = chunks.slice(1);

let output = `${heading}
  <ul>
  ${chunks.map(c => `<li>${c}</li>`).join('\n')}
  </ul>
`;

console.log(output);

Answer 3

按照您的应用程序逻辑，您需要使用v-for来填充配方中的项目，并将输入字符串转换为带有数组的对象，以传递给渲染器：

function getRecipe (str) {
  var items = str.split('*').map(s => s.trim())
  return { title: items.shift(), items }
}

// in your Vue
Vue.use(VueMarkdown)
...
  recipe: getRecipe(taco.recipe)
...

<p>
  {{ taco.recipe.title }}
  <ul>
    <li v-for="item of taco.recipe.items">
      {{ item }}
    </li>
  </ul>
</p>

还应该将初始状态设置为空值，以使Vue在初始化期间不会引发错误：

data {
  taco: {
    name: '',
    condiment_name: '',
    condiment_recipe_url: '',
    recipe: { title: '', items: [] }
  }
}

（可选）您可以使用vue-markdown呈现markdown语法。