如何使用正则表达式样式替换字符串字符？答案

【问题标题】：How to style replace string character using regex?如何使用正则表达式样式替换字符串字符？
【发布时间】：2017-07-13 22:46:36
【问题描述】：

尝试在字符串中设置| 的样式，但将完整的标签添加到字符串中，知道如何使用纯 Javascript 完成此任务吗？

ctrl.js

var string = "[2017-07-12T12:38:36-04:00]|zsh458|info|<n/a>|[infra.actorRouter] Processing message from topic UEQ: 216014da-b849-4a1d-8232-3629e58338ce { partition: 0, offset: 12081530 }"

var message = string.replace(/\|/g,'<span class="pipe">|</span>');

console.log(message); //printing this 

[2017-07-12T12:38:36-04:00]<span class="pipe">|</span>zsh458<span class="pipe">|</span>info<span class="pipe">|</span><n/a><span class="pipe">|</span>[infra.actorRouter] Processing message from topic UEQ: 216014da-b849-4a1d-8232-3629e58338ce { partition: 0, offset: 12081530 }

【问题讨论】：

控制台不是用来显示渲染的 HTML，只显示纯文本。
将message 放入元素的innerHTML 中，您会看到它的样式正确。
@Barmar 你能提供答案吗？

标签： javascript html css angularjs regex

【解决方案1】：

将消息放入 DOM，而不是控制台，以查看样式。

var string = "[2017-07-12T12:38:36-04:00]|zsh458|info|<n/a>|[infra.actorRouter] Processing message from topic UEQ: 216014da-b849-4a1d-8232-3629e58338ce { partition: 0, offset: 12081530 }"

var message = string.replace(/\|/g, '<span class="pipe">|</span>');
document.getElementById("message").innerHTML = message;

.pipe {
  color: red;
  font-weight: bold;
}

&lt;div id="message"&gt;&lt;/div&gt;

【讨论】：

TypeError: Cannot set property 'innerHTML' of null, 我将此跨度添加到来自使用 ng-repeat 显示的服务器的传入数据中，所以我的问题是我们在哪里指定 div 在这种情况下，我不能为此目的在 div 中添加 html 标记
在尝试添加样式之前，您是如何将输出添加到 DOM 的？以同样的方式做。这只是一个简单的例子。
这是我在 dom <li ng-repeat="message in event.data track by $index"> <span class="messageMargin" id="message">{{message.value}}</span> </li> 上的内容
对不起，我不知道 Angular，我不知道如何修改像这样添加的东西。您将此作为 Javascript 问题发布。