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

Find the string occurence and wrap it with a span

本文关键字：包装 字符串      更新时间：2023-09-26
<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中应用它。 有人吗？

对于 cin>> 和 cout<<的 BUG，它们不能被包裹，直到 ; http://jsfiddle.net/3N4AE/11/

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

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

演示小提琴

更新正则表达式方式演示

$('#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>'));
});

演示

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

OP 更新问题后更新

演示

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

更新

演示

$('#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 + ';');
        }
    });
});

考拉开发评论后更新

演示

$('#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 + ';');
        }
    });
});

这应该会有所帮助

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

斯菲德尔

相关文章：