在“：”之前定位 HTML 内容并更改样式

【问题标题】：Target HTML content before ":" and change styling在“：”之前定位 HTML 内容并更改样式
【发布时间】：2017-06-25 13:26:38
【问题描述】：

有几个示例与我想做的类似 - 但它们的内容不同，所以我不知道如何更改 javascript 以应用于我的项目。

我有一个由 PHP 通过 JSON 转储自动生成的 HTML 文件。我正在尝试将其设计为更漂亮一点。目前我让 PHP 脚本创建带有三个参数的 HTML 文件，HTML5 模板包裹着刚刚被转储到正文中的内容。

这意味着内容只不过是一个包含
的列表，我无法直接编辑。因此，我显然正在使用 javascript 来使冒号之前的所有内容变为粗体。

<body>
<h2>Data</h2>
 IP: 212.141.10.200<br/>Serial: C02SQ5REEYY0<br/>Date: Sun 25 Jun 2017 13:41:07 BST<br/> 
</body>

应该是

IP： 212.141.10.200

序列号： C02SQ5REEYY0

日期： 2017 年 6 月 25 日星期日 13:41:07 BST

【问题讨论】：

【解决方案1】：

您可以在元素的innerHTML 上使用正则表达式：

var body=document.body
body.innerHTML = body.innerHTML.replace(/([a-z]+):/gi, "<b>$1</b>:");

我认为这是最简单的，但不是最好的解决方案。它可能会破坏您的属性。例如 将转换为color: #333;">，这是不正确的。

【讨论】：

这看起来应该可以工作，但我收到一个错误“TypeError: null is not an object (evalating 'div.innerHTML')”
抱歉，刚刚意识到它需要在课程内容之后进行。我注意到的一件事是，如果冒号前有多个单词（示例中没有），它只会将最后一个单词加粗，无论如何都要在冒号之前做所有事情？
@DannyShepherd 您可以更改正则表达式。比如这样：jsfiddle.net/hs5abphz/2(/(^|>)([^<:]+):/gi, "$1$2:")