Question

假设我有以下文字：

"<Name>Tom</Name>"

通常，要使文本着色，我将执行以下操作（或使用Prism之类的库来执行此操作）：

<span class="tag">
    &lt;Name&gt;
</span>
Tom
<span class="tag">
    &lt;/Name&gt;
</span>

然后添加一个css属性，例如span.tag { color: red }

我想知道是否有可能在没有标记html本身的情况下为文本着色。我相信答案是否定的，但是我想知道是否可以基于正则表达式/字符串位置应用CSS？

Answer 1

span:before {
    color: red;
    content: "<Name>";
}

span:after {
    color: red;
    content: "</Name>";
}

<span>Tom</span>

Answer 2

假设您至少可以访问单个对象的输出，那么就可以了。

var str = "<Name>Tom</Name>";
document.getElementById("output").innerHTML = str;
var names = document.getElementsByTagName("Name");

for(x = 0;x<names.length;x++){
 var newEl = document.createElement('span');
 newEl.innerHTML = "&lt;Name&gt;<span class='value'>" + names[x].innerHTML + "</span>&lt;/Name&gt;";
 names[x].parentNode.replaceChild(newEl, names[x]);
}

span{color:red;}
span .value{color:black;}

<div id="output"></div>

在不使用html的情况下为文本着色

2 个答案: