用 span 包裹字符串

Posted 2023-03-03

【中文标题】用 span 包裹字符串

【英文标题】：Wrapping strings with a span

【发布时间】：2013-09-03 11:16:44

【问题描述】：

例如，我的 contenteditable div 中有这样的文本：

<div id = "board">
    <div>#include<iostream.h></div>
    <div></div>
    <div>int main()</div>
    <div>
        clrscr
           <span id="openParen">(</span>
           <span id="closeParen">)</span>     
        ;   
    </div>
    <div>return 0;</div>
    <div></div>
</div>

如果我看到一些关键字，它会包含在span 中。

<div id = "board">
    <div><span class="fragment">#include<iostream.h></span></div>
    <div></div>
    <div>int <span class="fragment">main</span>()</div>
    <div>
        <span class="fragment">
        clrscr
           <span id="openParen">(</span>
           <span id="closeParen">)</span>     
        ;
        </span>   
    </div>
    <div>return 0;</div>
    <div></div>
</div>

我已经完成了 #include 和 main 等关键字的包装，但我无法使用此代码（来自 https://***.com/users/2684660/funkwurm）包装 clrscr()：

$('#board').children().each(function(index, child) 
   var text = $(child).html();
       text = text.replace(/(#include(\s*&lt;.*&gt;)?)/g, '<span class="frag">$1</span>');
       text = text.replace(/(main)/g, '<span class="frag">$1</span>');
       text = text.replace(/(clrscr)/gi, '<span class="frag">$1</span>');
       $(child).html(text);
);

【问题讨论】：

不太清楚你在问什么。您是否需要帮助匹配关键字或帮助将其中一些关键字包装在跨度中？

1.匹配它们 2. 然后包装它们

那么您首先需要弄清楚您实际上要匹配哪些关键字。正则表达式替换可能是一种选择，但这实际上取决于您要匹配的内容。

#include 和 main 一会儿

@fireflieslive 但你也想要<iostream.h> 和#include 在这种情况下你要么有#include<iostream.h> 要么#include <iostream.h> 作为你的关键词！

【参考方案1】：

要匹配 #include、#include 、main() 和 main(..some arguments..)，您可以遍历原始 div 的子项，并为每一行使用正则表达式进行匹配和替换：

text = child.html();
text = text.replace(/(#include(\s*&lt;.*&gt;)?)/gi, '<span>$1</span>');
text = text.replace(/(main\(.*\))/gi, '<span>$1</span>');
child.html(text);

查看JSFiddle demo。您可能需要针对自己的用例调整正则表达式。

【讨论】：

这是我第一次看到 &lt 和 &gt，请您提供一些参考，以便我可以研究它们

在 HTML 中编码为 <和> / 因为您正在处理编码文本（child.html() 返回原始 HTML 内容），您需要使用这些 HTML 实体。

$1 表示用第一个匹配的组替换它们，基本上是正则表达式中最外层 ( 和 ) 之间的所有内容

两个版本之间的差异很小，我认为大多数开发人员应该能够理解代码背后的概念，即使是在喝咖啡的时候。 *** 的最终目标不是提供可以复制/粘贴的代码，而是在其他人遇到困难时提供指导。但我已经添加了缺失的部分以将其转换为 JS 以避免混淆。

看到这里的 cmets 让我想起了在 this answer 中发生的事情，但后来我仔细阅读了它们，我不得不在这里同意——如果写 JS 足够容易，那么只需写 JS 并为每个人节省头痛。有比将其混淆成完全不同的语言更好的方法来防复制代码。

【参考方案2】：

jQuery 版本（非 CoffeeScript）工作 jsFiddle

$('#board').children().each(function(index, child) 
    var text = $(child).html();
    text = text.replace(/(#include(\s*&lt;.*&gt;)?)/gi, '<span>$1</span>');
    text = text.replace(/(main\(.*\))/gi, '<span>$1</span>');
    $(child).html(text);
);

原来你不能像我在 dcro 的回答中建议的那样使用 text()。

【讨论】：

我更新了，你知道有什么问题吗？我用了你的代码

正如 TravisO 也建议的那样，您正在通过尝试编写自己的语法高亮器来重新发明***。一个快速的谷歌给了我一篇关于10 jQuery syntax highlighters的文章，里面有链接等等。

不，不，它不是为了语法高亮，这是某种代码跟踪器

我不清楚您在问题的 update 部分中究竟想实现什么，我仍然认为您可以使用现有的 jQuery 插件来实现它-在。要么搜索代码跟踪器插件，要么使用高亮插件来实现跟踪而不是高亮的目标。

啊，你希望它也包含括号，你可以将正则表达式更改为(clrscr[^;]*)。但是，再次尝试使用正则表达式来分解编程语言是不明智的做法。