Question

是否有一种简单的方法可以在html段落中的任意文本周围换行？例如，给出以下原始html：

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

我想根据用户输入包装文本的任意部分。因此，一组输入可能会将其转换为

<p>Here is a <span style="background:yellow">dandy block</span> of text to color up</p>
<p> WHOAH <span style="background:green">another paragraph</span></p>

另一组输入可能会创建

<p>Here is a<span style="background:yellow">a dandy block</span> of text to color up</p>
<p> WHOAH <span style="background:green">another</span> paragraph</p>

此问题与this one和this one有关，但与我的目标的主要区别在于我希望突出显示是永久性的，而不仅仅是临时选择，我也希望这样做在p元素内而不是textareas中工作。

如果有可能，我想它看起来就像使用jQuery

var innerText = $('p')[p_index].slice(char_start, char_end).text();
$('p')[p_index].slice(char_start, char_end).html(
    "<span style=\"background:yellow\">"+
    innerText +
    "</span>");

这将（理论上）选择p_index段落，获取给定索引之间的范围，并将其替换为新创建的跨度，其中原始文本嵌套在其中。这显然不起作用，因为在jQuery对象上的下载不会返回另一个内部jQuery对象。虽然

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

在段落级别上完全符合我的要求，但在文本级别内却没有。我可以使用这种方法通过完全编写每个段落给出我的字符范围来进行替换，但如果有一个简单的方法，我会非常感谢建议。

Answer 1

$("p")[p_index]

为您提供p_index处该段落的实际DOM元素，以便获取您需要使用的段落内容：

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

使用jQuery会更容易。您不会使用jQuery slice()方法将范围缩小为单个元素，而是使用.eq() method。尝试这样的事情：

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

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

演示：http://jsfiddle.net/62HHk/

Answer 2

我过去曾使用this plugin并获得了不错的结果。

Answer 3

试试这个：

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

Fiddle

Answer 4

这应该有效。它可以很容易地变成一个函数，将你正在寻找的单词作为参数。

jQuery.textReplace by Ben Alman

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

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

4 个答案: