找到字符串出现并用跨度包装它答案

【问题标题】：Find the string occurence and wrap it with a span找到字符串出现并用跨度包装它
【发布时间】：2013-08-31 05:59:34
【问题描述】：

<div id="wrapper">
  <div>if(true)<span class="openParen bm1">{</span></div>
  <div>cout<<"hey";cin>>x;</div>
  <div><span class="closeParen bm1>}</span></div>
</div>

我想使用正则表达式找到cout，例如/cout[^;]*;/，然后用span 包装它。

<div id="wrapper">
  <div>if(true)<span class="openParen bm1">{</span></div>
  <div><span id="group">cout<<"hey";</span>cin>>x;</div>
  <div><span class="closeParen bm1>}</span></div>
</div>

我将如何找到正则表达式的出现并用跨度包装它？请问有人吗？

更新：我在cout 之后插入了cin>>x;，不应包装cin。

我想用这样的东西

text.replace(/(cout[^;]*;)/g, '<span class="group">$1</span>');

但我不知道如何在 DOM 中应用它。有人吗？

BUG 用于 cin>> 和 couthttp://jsfiddle.net/3N4AE/11/

【问题讨论】：

您是在构建标记还是从某个地方获取标记并按原样输出？因为它似乎以某种方式被解析为括号，你不能为cout做同样的事情吗？
不能对 cout 做同样的事情。这实际上是一个使用 contenteditable div 具有跟踪功能的文本编辑器，我只想将 cout 分组，直到；用于逐步演示代码的过程。类似的东西。

标签： javascript jquery regex dom

【解决方案1】：

这是使用 jQuery 将正则表达式应用于 DOM 的方式：

$('#wrapper div').filter(':contains("cout")').each(function () {
    $(this).html($(this).text().replace(/(cout[^;]*;)/g, '<span class="group">$1</span>'));
});

Demo fiddle

【讨论】：

我认为您可以删除 cout 的过滤器？
@extraRice 你还想包装cin 吗？或以;分隔的任何语句？
@extraRice 您应该使用 elem.text() 作为正则表达式匹配的基础，而不是 html()，因为 html 包含编码为 &lt; jsfiddle.net/koala_dev/3N4AE/12 的标签
@extraRice 问题是这个cout<<one<<two; 不是有效的HTML 标记，浏览器会尝试使用<one 作为一个新的HTML 标签，你应该事先对输出进行编码，这样它才能正确呈现html 实体
@extraRice 没关系，我不再认为这是个问题，尝试使用这个正则表达式代替/(cout\s*(&lt;&lt;[^;&]*)+;)/g

【解决方案2】：

更新正则表达式方式 DEMO

$('#wrapper div').filter(':contains("cout")').each(function () {
    var x = $(this);
    var txt = x.text();
    x.html(txt.replace(/(cout[^;]*;)/g, '<span class="group">$1</span>'));
});

DEMO

var x =$('#wrapper div').filter(':contains("cout")');
var txt = x.text();
x.text('').append('<span id="group">'+txt+'</span>');

在 OP 更新问题后更新

DEMO

var x = $('#wrapper div').filter(':contains("cout")');
var txt = x.text();
x.text('');
var cout = txt.split(';');
$.each(cout, function (i, val) {
    if (val.indexOf('cout') > -1) {
        x.append('<span class="group">' + val + ';</span>');
    } else {
        x.append(val + ';');
    }
});

更新

DEMO

$('#wrapper div').filter(':contains("cout")').each(function () {
    var x = $(this);
    var txt = x.text();
    x.text('');
    var cout = txt.split(';');
    $.each(cout, function (i, val) {
        if (val.indexOf('cout') > -1) {
            x.append('<span class="group">' + val + ';</span>');
        } else {
            x.append(val + ';');
        }
    });
});

koala-dev评论后更新

DEMO

$('#wrapper div').filter(':contains("cout")').each(function () {
    var x = $(this);
    var txt = x.text();
    x.text('');
    var cout = txt.split(';');
    $.each(cout, function (i, val) {
        if (val.indexOf('cout') > -1) {
            x.append('<span class="group">' + val + ';</span>');
        } else if ($.trim(val) != '') {
            x.append(val + ';');
        }
    });
});

【讨论】：

问题是他要使用regex。
@extraRice 请注意，这是在文本末尾附加一个额外的;
@koala_dev：是的，这给我带来了一些麻烦。我的问题有一个建议。

【解决方案3】：

这应该会有所帮助

var pattern = /cout[^;]*;/;

var txt = $('#wrapper').find('div:nth-child(2)').text();
var el = $('#wrapper').find('div:nth-child(2)');

$(el).text("").append('<span id="group">' + txt + '</span');

jsfiddle

【讨论】：

你甚至没有使用模式，也没有必要使用find()或者有两个变量或者在你可以使用html()时清除文本，最后我认为这很明显OP 不会总是在第二个 div 中找到模式