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

Question

我只是想知道是否有可能从给定的数组元素中加粗一个单词。我的目的是强调价格信息。我将元素存储在一个变量中，以告知我的客户有关服务的信息。然后在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) => {
    return <li key={idx}>{templates}</li>
});

<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>

Answer 1

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

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

其中highlight类应用您需要的样式。

使用条件className将字符串拆分为React组件的更详细的方法

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>;
});