jQuery contains() with a variable syntax

Question

I have an "uncaught exception: Syntax error, unrecognized expression: )" in a jQuery application.

The code is:

<script>
    $(document).ready(function(){                      
        $('.drag').click(function() {
           $('.drag').each(function(i) {
                $(this).addClass('test' + i)
            });  

           var vtxt = $(this).text();
           $("p").removeClass("on");
           $("p:contains("+ vtxt +")").addClass("on");

       });
    });

The problem is when I add the variable vtxt to a contains: $("p:contains("+ vtxt +")").addClass("on");

I've tried several quotes but it just does not work. What is the right syntax for adding a variable to a contains?

This isn't jQuery related per se. It's your JavaScript input to contains() that is syntactically incorrect. :) — bzlm
– bzlm, Commented Feb 3, 2010 at 11:33

Andrew Hare · Accepted Answer · 2010-02-03 11:16:39Z

61

Try this:

$("p:contains('" + vtxt + "')").addClass("on");

answered Feb 3, 2010 at 11:16

Andrew Hare

353k75 gold badges649 silver badges642 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mircea Over a year ago

vtxt does not contains brackets. Andrew's response gave me a valid syntax, it works now. Thank you!

Gabriele Petrioli Over a year ago

make sure you you escape the vtxt contents as it will fail if it ever contains the ' or " character ..

Mircea Over a year ago

How should I escape the vtxt?

bobince Over a year ago

With backslashes. Or just loop over all p elements filtering for p.text().indexOf(vtxt)!==1. This avoids the escaping issue and is no slower than the selector version, since it's a non-standard selector jQuery has to implement in the same sort of way itself.

NilColor Over a year ago

If this answer is fit your needs you can accept it, isn't it?

|

Nelo Mitranim · Accepted Answer · 2013-12-11 06:12:08Z

9

Old question, but I must leave a note for future generations. Andrew's answer (the accepted one) didn't work for me. What did work was using a pre-made string as selector. Borrowing OP's examples:

var selector = "p:contains("+ vtxt +")";
$(selector).addClass("on");

answered Dec 11, 2013 at 6:12

Nelo Mitranim

8541 gold badge13 silver badges14 bronze badges

1 Comment

Jack Maessen Over a year ago

Agee! Accepted answer did also not work for me. This one does! (2021)

KatieK · Accepted Answer · 2012-11-30 18:48:31Z

3

I have used this answer in order to solve a similar problem.
I want to prevent the use of " and '

When using $("p:contains('" + valor + "')").addClass("on");, it works.

But when using $('p:contains('" + valor + "')**'**).addClass("on"), it does not!

edited Nov 30, 2012 at 18:48

KatieK

13.9k19 gold badges79 silver badges91 bronze badges

answered Feb 1, 2011 at 15:29

combuilder

931 silver badge7 bronze badges

Collectives™ on Stack Overflow

jQuery contains() with a variable syntax

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related