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

Question

所以，我正在寻找如何做类似于 Stackoverflow 的代码的事情：

例如，“var”是彩色的，而“test”不是

var test

我将如何编写一个 JavaScript 函数来做到这一点？

这是我尝试过的

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

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

Answer 1

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

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

然后只为跨度着色，jQuery 使这更容易

$('code span.variable-name').css('color', 'purple');

但是，还有语法高亮库可以使整个事情变得更容易，因为它在很大程度上是一个已解决的问题:)这是一个示例

Answer 2

这是一种使用正则表达式替换的快速而肮脏（强调肮脏）的方法，如果：

1. 您并不关心实际解析语法
2. 你知道代码元素只包含干净的文本，没有子标签

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

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>'
    );
}

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

看演示

Answer 3

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",

});