Question

我试图转过身来：

<p>this is sample 52 for demonstration</p>

要

<p>this is sample <span class="foo">52</span> for demonstration</p>

通过JS / Jquery

52只是一个例子，有不同数字的长字符串，我想全部检测它们我认为它是关于使用常规的消遣

对不起我在手机上问，没有编辑

Answer 1

在不知道真实用例的情况下，这里有一个简单的字符串替换，可以完成您的要求。

document.querySelector('p').innerHTML = document.querySelector('p').innerHTML.replace('52', '<span class="foo">52</span>');

span {
  background-color: yellow;
}

<p>this is sample 52 for demonstration</p>

Answer 2

var $element = jQuery('p');
var modifiedText = $element.text().replace('52', '<span class="foo" >52</span>');
$element.text(modifiedText);

该代码将使用p替换所有<span class="foo" >52</span>代码中的所有52个号码。你可以调整它以使其更具体。

<强>更新

包装所有数字：

var $element = jQuery('p');
var modifiedText = $element.text().replace(/\d+/g, '<span class="foo">$&</span>');
$element.text(modifiedText);

更新2：

正如@Kamal在评论中提到的那样，检查一个数字是否已被包装将是一件好事。这是更安全的实现，但它没有必要：

var wrapper = ['<span class="foo" >', '</span>']
var re = new RegExp('(' + wrapper[0] + ')?(\\d+)(' + wrapper[1] + ')?', 'g');
var $element = jQuery('p');

$element.text().replace(re, function(match, p1, p2, p3) {
    if (typeof p1 === 'undefined') {
        p1 = '';
    }
    if (typeof p3 === 'undefined') {
        p3 = '';
    }
    if (p1 != wrapper[0] && p3 != wrapper[1]) {
        return p1 + wrapper[0] + p2 + wrapper[1] + p3;
    } else {
        return match;
    }
});

如果某个号码已经显示为<span class="foo" >52</span>

，则此脚本不会包装该号码

使用带有Javascript / Jquery的span标记在文本中包装数字

2 个答案: