时间戳

首页 > 解决方案 > Javascript动态格式化带有项目符号的项目列表

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

问题描述

用例

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

在我填充长字符串的元素中，我只会得到一个简短的标题和一个列表。所以我希望列表（字符串的部分将以 a 开头*）首先用 a 包装，<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. 抓住项目符号点*和它与任何字符之间的间距并将其删除。

所需的内部 HTML 输出

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上的当前演示

标签： javascriptvue.js

解决方案

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>

推荐阅读