javascript - How to use jQuery to select all text inside paragraph after specific character - Stack Overflow

admin管理员组

文章数量:1334674

I would like to use jQuery to find specific character, in this case "#" inside one or more paragraphs, remove that character, and wrap everything after in span tag.

Here is HTML example:

<p>Lorem ipsum dolor sit amet # consectetur adipiscing elit<p>

And jQuery should convert code above into this:

<p>Lorem ipsum dolor sit amet <span>consectetur adipiscing elit</span></p>

I spent few hours on this already and I know solution should be relatively simple, but I can't find it. Is there any jQuery guru willing to help? Thanks!

I would like to use jQuery to find specific character, in this case "#" inside one or more paragraphs, remove that character, and wrap everything after in span tag.

Here is HTML example:

<p>Lorem ipsum dolor sit amet # consectetur adipiscing elit<p>

And jQuery should convert code above into this:

<p>Lorem ipsum dolor sit amet <span>consectetur adipiscing elit</span></p>

I spent few hours on this already and I know solution should be relatively simple, but I can't find it. Is there any jQuery guru willing to help? Thanks!

• javascript
• jquery

Share Improve this question Follow asked Apr 19, 2011 at 18:44 KlikerkoKlikerko 1,09722 gold badges1111 silver badges2929 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Here is a working jsFiddle demo:

HTML:

<p>Lorem ipsum dolor sit amet # consectetur adipiscing elit</p>

jQuery:

$("p:contains('#')").each(function() {

   var $this = $(this),
       splitText = $this.text().split("#"),
       formattedText = splitText[0] + "<span>" + splitText[1] + "</span>";

   $this.html(formattedText);

});

-- In case you wanted to keep nesting spans for multiple occurrences: --

Use this working jsFiddle demo:

HTML:

<p>Lorem ip#sum dolor sit amet # consectetur adip#iscing elit</p>

jQuery:

$("p:contains('#')").each(function() {

   var $this = $(this),
       thisText = $this.text(),
       numberOfOccurrences = thisText.split("#").length,
       formattedText = thisText.replace(/\#/g, "<span>");

    for (var i = 1; i < numberOfOccurrences; i++) { formattedText += "</span>"; }

    $this.html(formattedText);

});

Update Notes:

• Multiple Occurrence jsFiddle was updated to remove the extra var splitText, as it was unnecessary.
• Multiple Occurrence jsFiddle was moved and css was updated to visually show the spans.

Something like this

$("p:contains('#')").each(function () {
   var $this = $(this);
   var thisText = $(this).text().split("#");
   $this.html(thisText[0] + "<span>" + thisText[1] + "</span>";
});

This should work:

$("p").each(function(){
var text = $(this).text().split("|"); 
$(this).html(""); 
var final = text[0] + "<span>" + text[1] + "</span>"; $(this).html(final);
});

Here's an example of the following →

$('p').each(function(i,elem){
    var $this = $(this),
        tStr = $this.text(),
        res = tStr.replace(/(^.*)(\#.*$)/, '$1<span>$2</span>').replace('#','');

    $this.html(res);
});

本文标签： javascriptHow to use jQuery to select all text inside paragraph after specific characterStack Overflow