使用javascript在代码示例中突出显示语法。

所以，我在研究如何做一些类似于Stackoverflow的代码的事情：

e、 g.“var”是彩色的，“test”不是彩色的

如何编写JavaScript函数来实现这一点

这就是我试过的

if ("var")  {
document.getElementByTagName("code").style.color="purple";
}

---

因此，当文本“var”位于“code”元素中时，它只会变成“var”紫色。

我会将变量名包装在一个span中

<code>
  var <span class="variable-name">test</span>
</code>

然而，还有语法突出显示库，这将使整个过程变得更简单，因为这在很大程度上是一个已解决的问题：）

这里有一个快速而肮脏（强调肮脏）的方法来使用regex replace，如果：

您不关心实际解析语法

您知道代码元素只包含干净的文本，没有子标记

如果是这样，您可以执行以下操作：

var els = document.getElementsByTagName('code'),
    code;

for (var i = 0; i < els.length; i++) {
    code = els[i].innerHTML;
    els[i].innerHTML = code.replace(
        /\bvar\b/g,
        '<span style="color: #f00;">var</span>'
    );
}

var els=document.getElementsByTagName（'code'），
代码；
对于（变量i=0；i

是的，使用类而不是内联样式是更好的做法，但是不遵循以上两点也是不好的做法，这只是为了举例

---

HTML和js元素

 <div>
   var test;
 </div>


<script>
 var varText = $( "div" ).text().split( " " ).join( "</span> <span>" );
 newText = "<span>" + varText + "</span>";

$( "div" )
.html( varText )
.find( "span" )
.end()
.find( ":contains('var')" )
.css({
  "color": "purple",

});

var检验；
var varText=$（“div”）.text（）.split（“”）。join（“”）；
newText=“”+varText+”；
$（“div”）
.html（varText）
.find（“span”）
(完)
.find（“：contains（'var'）”）
.css({
“颜色”：“紫色”，
});

---

你现在走错了路。在尝试做这件事之前，你应该先提高你的html和javascript知识，因为你陷入了错误的概念，我的选择会阻碍你的学习。@Wagner谢谢，我对html和CSS非常熟悉，我只是想知道是否有一种方法可以用JavaScript更快地完成它。如果你真的想做正确的语法高亮显示，那就要复杂得多了。它要么是一个非常复杂的正则表达式（对于大多数常见的语法形式，它仍然不能完全工作），要么你必须将你的字符标记成AST，并相应地将相关部分映射到原始代码中。你自己做这件事需要实现一个相当好的lexer块，所以，一个库绝对是一个不错的选择。我希望不用额外的HTML就可以做到这一点。这可能吗？当然可能，我会研究一个语法突出显示库，比如：谢谢你接受，我想你接受是因为我上面的评论^是 啊谢谢你的帮助。

var els = document.getElementsByTagName('code'),
    code;

for (var i = 0; i < els.length; i++) {
    code = els[i].innerHTML;
    els[i].innerHTML = code.replace(
        /\bvar\b/g,
        '<span style="color: #f00;">var</span>'
    );
}

 <div>
   var test;
 </div>


<script>
 var varText = $( "div" ).text().split( " " ).join( "</span> <span>" );
 newText = "<span>" + varText + "</span>";

$( "div" )
.html( varText )
.find( "span" )
.end()
.find( ":contains('var')" )
.css({
  "color": "purple",

});