Javascript 我应该如何强调js数组中的一个单词并设置其样式？

我只是想知道是否可以从给定的数组元素中加粗一个单词。我的意图是强调价格信息。我将元素存储在变量中，以告知客户有关服务的信息。然后我在UI中的

li

元素中显示这些数组元素。HTML和CSS中的加粗价格不是问题。我想知道如何用JavaScript实现它？价格应该用粗体和斜体表示

const templates= ['Instagram templates & styling from $800 USD', 'Business/Loyalty Cards from $500 USD', 'Brand & Website Audit from $500 USD', 'Additional Web Pages $300 USD',
                 'Service Menu/Flyer from $1000 USD', 'Packaging design from $1000 USD', 'Price of website + online shop setup - from $4000 USD (up to 15 products)',
                 '+ SEO styler - $ 300 USD (implement basic SEO to any existing squarespace site)'];

const fourth=templates.map（（templates，idx）=>{
返回
{templates}
});

你能期待的那种结果

{fourth}

如果输入是可信的，您可以使用正则表达式匹配价格，并使用

危险的setinenerHTML

：

const fourth = templates.map((str, idx) => {
    const __html = str.replace(/\$\s?\d+/g, '<span class="highlight">$&</span>`);
    return <li key={idx} dangerouslySetInnerHTML={{ __html }} />;
});

---

当一个答案解决了你的问题时，你可以考虑将投票和/或标记为接受（检查左边的复选框）以表明问题得到解决：

<div className="results">
   <div className="service-list">
      <h2 className="results">The kind of result you can expect</h2>
      <div>
         <ul className="mylist">
            <li>{fourth}</li>
         </ul>
      </div>
   </div>
</div>

const fourth = templates.map((str, idx) => {
    const __html = str.replace(/\$\s?\d+/g, '<span class="highlight">$&</span>`);
    return <li key={idx} dangerouslySetInnerHTML={{ __html }} />;
});

const fourth = templates.map((str, idx) => {
    const matches = str.match(/\$\s?\d+|[^$]+/g);
    const children = matches.map(match => (
        match.startsWith('$')
            ? <span className="highlight">{match}</span>
            : <span>{match}</span>
    ));
    return <li key={idx}>{children}</li>;
});