CODEWITHSUNDEEP
javascripthtmlcss
iamLinker
iamLinker

Reputation: 98

Get the actual text-content of pseudo-element content using pure javascript

I was able to get the text/content of pseudo-element content using window.getComputedStyle('element', ':before').getPropertyValue('content');. However, it returns a string enclosed in a double quote. I want it to return the actual string without the quotation so I tried to use valueOf() but it gave me the same result. I want to know if there's an existing method for that before I create my own. Thanks!

Upvotes: 3

Views: 2165

Answers (2)

trincot
trincot

Reputation: 350477

The quotes are included to denote it is a literal string. This is necessary, because the CSS content attribute can contain expressions, like:

{ content: attr(class) }

{ content: "(" attr(class) ")" }

.. which will dynamically retrieve the element's class attribute and display that. In the second case it will be wrapped in parentheses.

When you retrieve the property value with .getPropertyValue('content') you will in fact get that expression as return value, which in the first case will be attr(class) without quotes.

Now, if you are certain that your property value is a string literal you can unwrap the string.

I would suggest:

JSON.parse(window.getComputedStyle('element', ':before').getPropertyValue('content'));

Upvotes: 2

jack
jack

Reputation: 1391

Since you are saying you already got the string, but with quotes, then do:

var t = '"hello"'; // here put your text resulting from your prev code
console.log(t);

t = t.replace(/"/g, '');
console.log(t);

Upvotes: 2

Related Questions