jquery - 我如何遍历元素中的每个单词然后有条件地换行匹配？

Question

我正在用 ASP.NET 写我自己的博客，我正在使用 Gist embed对于我的代码块。我想给代码上色以匹配特定语言在其 IDE 中的显示方式。特别是 Xcode 中的 Swift。

我从一个 jsFiddle 开始，已经到了选择“var”并将其变成红色的地步，但是我找到的用于迭代单词并将它们包装起来的示例使用了一个 return 值，它打破了循环。

更新: 我在这里找到的 return 语句导致语法错误。我改编了 this post 中的代码，并且很乐意探索替代方案。

如何遍历屏幕上的每个单词并有条件地换行？

我可以匹配一个词，但我找不到继续操作的方法。为了简单起见，我们只查找两个词，var 和 override。

我的代码:

var line = $('.line');

$.each(line, function(i, val){
   var value = $('.line').text();

    $("*:contains('var')").html(function(_, html) {

        return html.replace(/(var)/g, '<span style="color:red;">$1</span>');
    });

    $("*:contains('override')").html(function(_, html) {

        return html.replace(/(override)/g, '<span style="color:blue;">$1</span>');
    });
});

我的 jsFiddle .

Answer 1

您有一个遍历每一行的循环，在该循环中，您在每次迭代中获取包含一个单词的所有元素，从而使替换运行很多次。

做一次迭代，它可以通过回调 html() 来完成，因为它迭代迭代，并在同一个循环中进行替换

$('.line').html(function(_, html) {
    html = html.replace(/(var)/g, '<span style="color:red;">$1</span>');
    html = html.replace(/(override)/g, '<span style="color:blue;">$1</span>');

    return html;
});

FIDDLE