如何遍历元素中的每个单词，然后有条件地包装匹配项？

Posted 2023-02-23

【中文标题】如何遍历元素中的每个单词，然后有条件地包装匹配项？

【英文标题】：How can I iterate over every word in an element and then conditionally wrap matches?

【发布时间】：2015-07-29 04:52:30

【问题描述】：

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

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

update: 我在这里找到的 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。

【问题讨论】：

你打开控制台了吗？

我一直在使用打开的控制台，我是 jQuery 新手，所以我通常根据来自 console.logs 的积极反馈来工作。

语法错误，我唯一的猜测是它的 (_, html)

不，更像这样 -> jsfiddle.net/91xrosxa/3

@adeneo - 你能把它作为答案发布吗？

【参考方案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