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

【问题标题】：How to style part of text string before a symbol如何在符号之前设置部分文本字符串的样式
【发布时间】：2023-04-03 08:32:01
【问题描述】：

我有来自 for 循环的文本，例如 "Hello: how are you?" 和 "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 做到这一点？

【问题讨论】：

你试过什么？除非 JavaScript 是一个选项，否则没有办法做到这一点，除非 HTML 描述了分隔应该发生的位置。例如。 <span>Hello:</span> how are you?
我尝试使用 css :before 和 :after ，看起来只用于插入内容
@j08691 你能发布你的javascript解决方案吗？我看看能不能用这个
您需要先发布您的 HTML 并更新您的标签
那么您的限制究竟是什么？您对打印文本的控制为零？

标签： html css angularjs

【解决方案1】：

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

如果你可以修改模板，你可以写：

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

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

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

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

【讨论】：

我认为我必须采用这种方法。但我的模板更复杂，我改变了我的问题。你能看到我如何在这里使用你的想法吗？
@NoStressDeveloper 如果这回答了您的问题，您能否将其标记为已接受？

【解决方案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?"

【讨论】：

【解决方案3】：

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

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

【讨论】：

它是一个基于变量的动态 html。所以我不认为我可以使用这个

【解决方案4】：

只需将你想要的内容包装在 标签中

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

【讨论】：

我认为这不是那么简单，OP 无法修改 HTML
是的，我不能那样修改。它是基于变量的动态html