更改 p 标记中单行的颜色，然后将其更改回来

Question

请不要误会我的意思，我知道我可以在段落中放置一个带有类的span标签，然后更改它的颜色。但这不是我所需要的。

我的应用程序在浏览器中显示一些日志文件。我正在使用 p 标签中的 AJAX 加载数据(从我的日志文件中(。现在我想将包含"错误"的行的颜色更改为红色。但我需要其他线条是黑色的。因此，如果我写入 span 标签，所有错误都在 p 标签之上。那也不是我想要的。

例如：我有一个信息日志，一个错误日志，还有一个信息日志。我的线条应该有颜色：黑色，红色，黑色

有谁知道我该怎么做？

感谢您的帮助

Answer 1

你说的是"行"，所以我假设数据用换行符分隔，例如n.要在段落中制作这些行，您必须将它们转换为 <br> ，并且为了避免在条目的文本中<和&误解，您需要将它们转换为字符实体。所以我们不妨将错误行包装在跨度中，请参阅注释：

// The data
var text =
  "INFO: Blah blah blahn" +
  "ERROR: OMG, something went wrongn" +
  "WARNING: Don't run with scissorsn" +
  "ERROR: Knife inserted in electrical socket.n" +
  "INFO: More blah";
// First, encode entities
text = text.replace(/&/g, "&amp;").replace(/</g, "&lt;");
// Split into lines
var lines = text.split("n");
// Wrap errors in error span
lines = lines.map(function(line) {
  return line.startsWith("ERROR:") ? "<span class=error>" + line + "</span>" : line;
});
// Combine with <br> and put in the paragraph
document.getElementById("target").innerHTML = lines.join("<br>");

.error {
  color: #d00;
}

<p id="target"></p>

为了清楚起见，这很冗长。简短版本：

document.getElementById("target").innerHTML =
  text.replace(/&/g, "&amp;").replace(/</g, "&lt;")
  .split("n")
  .map(function(line) {
    return line.startsWith("ERROR:") ? "<span class=error>" + line + "</span>" : line;
  })
  .join("<br>");

var text =
  "INFO: Blah blah blahn" +
  "ERROR: OMG, something went wrongn" +
  "WARNING: Don't run with scissorsn" +
  "ERROR: Knife inserted in electrical socket.n" +
  "INFO: More blah";
document.getElementById("target").innerHTML =
  text.replace(/&/g, "&amp;").replace(/</g, "&lt;")
  .split("n")
  .map(function(line) {
    return line.startsWith("ERROR:") ? "<span class=error>" + line + "</span>" : line;
  })
  .join("<br>");

.error {
  color: #d00;
}

<p id="target"></p>

Answer 2

很

抱歉，但没有直接的方法可以做到这一点，因为打开和关闭 HTML 标签中的所有文本都被视为文本节点(作为一个整体(，并且没有 CSS 选择器可以完成您要完成的任务。我给你的唯一建议是使用 JavaScript 来解析接收到的文本(可能在"done"ajax 事件中(，以动态添加上述标签及其相应的 CSS 类。