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

user_4973620 0
Viewed 1452

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!

css html javascript
2 Answers

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);

user_45484130

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'));
user_54598390
Related