html - 如何在符号之前设置部分文本字符串的样式

Question

我有来自 for 循环的文本，例如"Hello: how are you?" and "Hi: I am fine"。

我想让之前的文字:加粗。所以上面的例子我需要大胆"Hello"，"Hi"因为它们在前面":"

所以实际上我的 html 是 . 节点上有一个for循环

       <div >      
          <a>
            {{node.childrenCount == 0 ? node.code + ': ' + node.name: node.code + ': '+ node.name  + ' ('+ node.childrenCount + ')' }}
          </a>
        </div>

我如何使用 CSS 做到这一点？

Answer 1

在不修改标记的情况下使用 CSS 是不可能的。

如果您可以修改模板，则可以编写：

<div>      
  <a><strong>{{ node.code }}</strong>: {{ node.name }}</a>
</div>

---

（编辑以解决更新问题中的三元）

childrenCount如果不等于，则该三元有条件地呈现括号中的0，可以写为：

<div>      
  <a><strong>{{ node.code }}</strong>: {{ node.name }}{{ node.childrenCount !== 0 ? ' (' + node.childrenCount + ')' : '' }}</a>
</div>

Answer 2

尝试使用：

let str = "Hello: how are you? Hi: Im fine?";
str = str.replace(/[a-zA-Z]+:/g, '<strong>$&</strong>');
//result: "<strong>Hello:</strong> how are you? <strong>Hi:</strong> Im fine?"

Answer 3

使用strong标签有助于屏幕阅读器，但您也可以使用标签或使用 css 属性b修改标签。spanfont-weight:bold;

 <strong>Hello:</strong>How are you?

Answer 4

只需将您想要的内容包装在 < b > 标签中

<b>Hello:</b>How are you? <br>
<b>Hi:</b> I am fine".