How to pass Label contents to function

Question

I have a jQuery function I am calling with the below code. The function searches for the words shown in the "words:" area in the "QAList" and then makes just those words bold. This is working fine with this code and the words "Demo" and "or" are made bold.

    $("[id$=QAList]").wrapInTag({
      words: ['Demo User', 'or'],
      tag: '<selected>'
    });

I am now trying to pass the "words:" list in from a label or textbox but for some reason I cannot get it to pass the correct information, and I am not 100% sure to see what it is actually passing.

This is how I changed the code to pull from the lblSelectedQA label:

    $("[id$=QAList]").wrapInTag({
      words: [$("[id$=lblSelectedQA]").html()],
      tag: '<selected>'
    });

I even tried it from a textbox in case the label was not working for some reason:

    $("[id$=QAList]").wrapInTag({
      words: [$("[id$=lblSelectedQA]").val()],
      tag: '<selected>'
    });

I am getting what I need from the label and the textbox if I put them in an alert, they return:

'Demo User', 'or'

Do I have incorrect syntax after the "words:" now that I am trying to pass the value from somewhere else?

Thanks!

**Edit in response to iurisilvio's answer below

In response to your answer I changed my code a little bit both in what is populating the 'Demo User', 'or' text to get rid of the single quotes and extra spaces. It now looks like this: Demo User,or and works fine with single results.

I then tried adding the .split(",") which works for one of the values in the array if I add the index [0] or [1], but will not stand alone for all the array items.

Utkanos shows basically the same thing, just adding a way to also get rid of the spaces and single quotes which I no longer need to do.

This is my code now which works for a single result:

    $("[id$=QAList]").wrapInTag({
      words: [$("[id$=lblSelectedQA]").html().split(",")],
      tag: '<selected>'
    });

But when it returns multiple results it won't work unless I add the index, but then will only work for the index that I hard code... not an option since I don't know how many will be in this array.

    $("[id$=QAList]").wrapInTag({
      words: [$("[id$=lblSelectedQA]").html().split(",")[0]],
      tag: '<selected>'
    });

or

    $("[id$=QAList]").wrapInTag({
      words: [$("[id$=lblSelectedQA]").html().split(",")[1]],
      tag: '<selected>'
    });

Is there a way for me to get it to take all the array items without having to loop through them?

Thanks!

**Edit for solution:

I needed to drop the brackets around what I was just adding. I figured that out and came back and Utkanos had just posted the same thing :)

Working code:

    $("[id$=QAList]").wrapInTag({
      words: $("[id$=lblSelectedQA]").html().split(","),
      tag: '<selected>'
    });

Thanks!!

Answer 1

This way, your words var is equal ["'Demo User', 'or'"] (one element). If you split your string, you get what you want:

// suposing your_text is right
words: your_text.split(",")

Of course it is a simplified solution. If you want to get something like 'word, 1', 'word 2', you need a better parser to your problem, but it is the way.

Answer 2

The words parameter should be an array. The string 'Demo User', 'or' looks like the print-out from an array that contains those values, but is ultimately a string, not an array.

In other words, you're passing a string that looks a bit like an array, not an actual array.

Assuming the string you're retrieving from the element is, as you say, 'Demo User', 'or', you need to split that into an array by splitting on the delimiter - in your case, the comma and space. You'll also need to remove the ' around the various tokens.

$("[id$=QAList]").wrapInTag({
    words: $("[id$=lblSelectedQA]").val().replace(/'/g, '').split(, ?/),
    tag: '<selected>'
});