Question

尝试在字符串中设置|样式，但是将完整标记添加到字符串中，任何想法如何使用纯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 }

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

<div id="message"></div>

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

1 个答案: