Question

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

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

var test

我如何编写JavaScript函数来执行此操作？

这就是我试过的

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

因此当文本“var”在“code”元素中时，它变为JUST“var”purple。

Answer 1

我会在一个范围中包装变量名称

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

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

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

然而，还有一些语法高亮库可以让这一切变得更容易，因为它在很大程度上解决了问题:) Here is an example

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

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

See demo

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

});

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

3 个答案: