0

是否有一种简单的方法可以将跨度环绕在 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和this有关，但是，与我的目标的主要区别是我希望高亮是永久性的，而不仅仅是临时选择，而且我还希望它在 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>");

完全符合我在段落级别上的要求，但不是在文本级别上。考虑到我拥有的字符范围，我可以使用这种方法通过完全编写每个段落来进行替换，但是如果有简单的方法，我将非常感谢您的建议。

4

4 回答 4

2 
$("p")[p_index]

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

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

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

$('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()方法时，jQuery 会将 html 设置为您从函数返回的任何内容。jQuery 将元素的当前（内部）html 传递给函数，以便您可以处理它。（如果您对包含多个元素的 jQuery 对象执行此操作，您的函数会为每个元素调用一次，以便可以单独处理它们。）

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

于 2012-08-27T08:37:17.823 回答
0

我过去使用过这个插件，效果很好。

于 2012-08-27T08:26:45.157 回答
0

尝试这个：

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

小提琴

于 2012-08-27T08:32:22.087 回答
0

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

jQuery.textReplace by Ben Alman

$('.text').replaceText( /hello/g, '<span classs="interesting">hello</span>' );
于 2012-08-27T08:45:22.287 回答