使用javascript更改任意文本的背景色

有没有一种简单的方法可以在html段落中围绕任意文本包装跨距？例如，给定以下原始html：

<p>Here is a dandy block of text to color up</p>
<p> WHOAH another paragraph</p>

在段落级别上完全符合我的要求，但在文本级别上不符合我的要求。我可以使用这种方法进行替换，根据我的字符范围，完全写出每一段，但如果有简单的方法，我非常感谢你的建议。

我过去使用过，效果很好。

试试这个：

$('input[type=text]').keyup(function() {
    var val = $.trim(this.value);
    var text = $('p').text().split(' ')
    $.each(text, function(i, v) {
        if (v == val) {
            text[i] = '<span>'+v+'</span>';
        }
    })
    $('p').html(text.join(' '))   
})

$（'input[type=text]'）.keyup（function（）{
var val=$.trim（此.value）；
var text=$（'p'）.text（）.split（“”）
$。每个（文本、函数（i、v）{
if（v==val）{
文本[i]=“v+”；
}
})
$（'p'）.html（text.join（“”））
})

为您提供实际的DOM元素，即

p_index

处的段落，因此要获取段落内容，您需要使用：

$("p")[p_index].innerHTML
// OR
$("p")[p_index].textContent

不过，使用jQuery会更容易。您不会使用jQuery

slice（）

方法将范围缩小到单个元素，而是使用。试着这样做：

$('p').eq(p_index).html(function(i,currentText) {
     return currentText.substring(0, char_start) +
            "<span style=\"background:yellow\">" +
            currentText.substring(char_start, char_end) +
            "</span>" +
            currentText.substring(char_end);
});

$（'p'）.eq（p_index）.html（函数（i，currentText）{
返回currentText.substring（0，字符开始）+
"" +
currentText.substring（字符开始，字符结束）+
"" +
currentText.substring（字符结束）；
});

将函数传递给时，jQuery将html设置为从函数返回的内容。jQuery将元素的当前（内部）html传递给函数，以便您可以对其进行处理。（如果在包含多个元素的jQuery对象上执行此操作，则会对每个元素调用一次函数，以便可以单独处理它们。）

---

演示：

这应该可以。它可以很容易地转换成一个函数，将您要查找的单词作为参数

$（'.text'）.replaceText（/hello/g，'hello'）；

真的吗？

replaceText

是一个插件吗？哎呀，忘了添加链接了。啊，我不知道

replaceText

，但遗憾的是，这不太符合我的目标，因为我有我想要突出显示的特定索引，并且不想在其他区域错误地突出显示具有相同子字符串的文本。我真的很喜欢你在这里所做的工作，但是OP要求提供一种包装任意文本的方法，而不一定是单个单词。@nnnnnn谢谢。是的，你是对的，我想根据用户输入包装文本的任意部分。它需要更多的工作。谢谢！我不知道

eq（int）

操作符。这看起来是提出的最好的解决方案，尽管没有我想象的那么好。

$("p").slice(0, 1).html("<span style=\"background: blue\">" +
                        $("p").slice(0, 1).text() + 
                        "</span>");

$('input[type=text]').keyup(function() {
    var val = $.trim(this.value);
    var text = $('p').text().split(' ')
    $.each(text, function(i, v) {
        if (v == val) {
            text[i] = '<span>'+v+'</span>';
        }
    })
    $('p').html(text.join(' '))   
})

$("p")[p_index]

$("p")[p_index].innerHTML
// OR
$("p")[p_index].textContent

$('p').eq(p_index).html(function(i,currentText) {
     return currentText.substring(0, char_start) +
            "<span style=\"background:yellow\">" +
            currentText.substring(char_start, char_end) +
            "</span>" +
            currentText.substring(char_end);
});

$('.text').replaceText( /hello/g, '<span classs="interesting">hello</span>' );