How can I select an HTML element with an attribute having quotes in its value?

Question

I have an HTML element, Now I have to select the element using the data attribute with value contain double quotes or single quotes using jQuery or javascript.

jQuery('.test-sp[data-value=""test"]').trigger('click');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-value=""test">Test lppp</span>

My data value is "test. I require to select the div/span using the data attribute which has a value containing quotes.

[That looks like invalid HTML to me](https://stackoverflow.com/questions/4015345/how-do-i-properly-escape-quotes-inside-html-attributes). Probably the browser will just set you and empty `data-value` attribute with some invalid `test"` suffix-attribute-leftover — Lain, Dec 28 '20 at 13:43
Yes, This is like invalid HTML. I just need to know, if any method for selecting HTML element. I am getting HTML output like this. Now I need to trigger this element — junaid TK, Jan 05 '21 at 06:23
Your selector does and will not work. If you select your element using `document.querySelector('[data-value]')` you can actually see that it is an element with an empty `data-value` and an invalid attribute `test"`. That output ist just wrong and needs to be corrected. Else you have to loop all elements with `data-value` and make a string comparison on its outer HTML or loop all the attributes individually. — Lain, Jan 05 '21 at 07:26

score 0 · Answer 1 · answered Dec 28 '20 at 13:02

0

use \ before String's ".

<span data-value="\"test">Test lppp</span>

answered Dec 28 '20 at 13:02

Ryan Tafakori

146
3

score 0 · Answer 2 · answered Dec 28 '20 at 13:06

You can make your elements more specific by giving them certain classes, or by their position, and search the elements within the JavaScript. You can access the dataset attribute of an element

<ul>
  <li data-value="random">1</li>
  <li data-value="word">2</li>
  <li data-value="test">3</li>
</ul>

<script>
  // Or some other class to target them
  const elements = document.querySelectorAll('ul > li');

  for (let i = 0; i < elements.length; i += 1) {
    const el = elements[i];
    if (el.dataset.value === 'test') {
      // This is the element you are looking for!
    }

  }
</script>

Azhar · Answer 3 · 2021-01-06T11:35:19.043

0

Wrap up the value of data-attribute in the html and script tags within single quotes. If you use single quotes to wrap up the values it will accept values with quotes.

And for click event you will have to escape the value of data-attribute with a back slash in the script tag.

I am using a variable in the script to get the data-attribute of from the span tag it has value with double quotes, you can also pass single quotes. It is working.

Here is the working code.

var dattrvalue = $(".spn").attr("data-value");
$("span[data-value='" + dattrvalue + "']").click(function(event) {
  $("#para").html("Hurray!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="spn" data-value='"test'>Click Me</span>

<p id="para">This is a paragraph tag!</p>

edited Jan 06 '21 at 11:35

answered Dec 28 '20 at 13:52

Azhar

107
12

`Test lppp` Here I am using quotes inside the double quotes. I am getting the error **Uncaught Error: Syntax error, unrecognized expression: .test-sp[data-value=""test"]**. I want to trigger the specified element with the data value "test. In the case of dynamic value of data, I can't able to replace double quotes with a single. In some case, single quotes will come in place of double quotes – junaid TK Dec 28 '20 at 15:32
To replace double quotes here I mean that when you bind the data-value dynamically you do not have to replace your dynamic value. You need to use single quotes for binding the data-attribute use single quotes like this `data-value='yourdynamicvalue'` and the **yourdynamicvalue** which you are getting dynamically need not require to replace the double quotes it can remain exactly what the dynamic value you are getting. Example `Test lppp` check I am using single quotes to bind the data-attribute. – Azhar Dec 29 '20 at 05:02
I can't predict the output of the HTML, Some times it will be single quotes, some times it will be double-quoted. – junaid TK Jan 05 '21 at 06:31
Hey @junu I get you that you cannot predict the output. And the code snippet which I shared is to tackle dynamic values in which it can either be with single quotes or double quotes. I have updated my code and used dynamic variable in script tag For dynamic variable you need not to escape the value in the script click event. You can update the data-value in the span tag with single quotes like this `Click Me` Both is working for the click event. – Azhar Jan 06 '21 at 11:38

score 0 · Answer 4 · answered Jan 05 '21 at 08:07

My data value is "test.

Not according to your markup.

<span data-value=""test">Test lppp</span>

Is the same as:

<span data-value="" test"="">Test lppp</span>

You can easily check that yourself in a snippet:

console.log(
    document.querySelector('[data-value]').outerHTML
)

<span data-value=""test">Test lppp</span>

Quotes and doublequotes are invalid characters on standalone attributes. You should fix your markup before you proceed.

How can I select an HTML element with an attribute having quotes in its value?

4 Answers4