How text-replace property work in css?
Wow! You've stumbled upon a property that was last in the 2007 GCPM specification and removed in the 2010 revision. And in an online test at that! Either the test you're taking is several years out of date, or whoever set it was just pulling from random old revisions of W3C specifications and treating them all as relevant (as users have been known to do here on Stack Overflow).
Because of how esoteric this is I'm going to just answer the question. Needless to say, this answer is provided for educational purposes only. There is no text-replace
property in any current CSS specification, and there hasn't been for almost a decade (neither in css-content nor css-gcpm). Don't put it in your CSS and expect it to work. It won't. If you need to do text replacements in an HTML document, use JavaScript.
The answer is #2: "cndy lives cehind ccfe"
The exact CSS sample appears in the spec, linked above, and the example is described as follows (emphasis mine):
The two rules below yield the same result. In the first rule all ‘a’ characters are converted to ‘b’. Subsequently, all ‘b’ characters are converted to ‘c’. In the second rule, all ‘a’ and ‘b’ characters are converted directly to ‘c’.
body { text-replace: "a" "b" "b" "c" }
body { text-replace: "a" "c" "b" "c" }
So the processing order goes:
- andy lives behind cafe
- bndy lives behind cbfe
- cndy lives cehind ccfe
How to replace text in css?
The answer is #2:
“cndy lives cehind ccfe”
The exact CSS sample appears in the spec, linked above, and the example is described as follows (emphasis mine):
The two rules below yield the same result. In the first rule all ‘a’ characters are converted to ‘b’. Subsequently, all ‘b’ characters
are converted to ‘c’. In the second rule, all ‘a’ and ‘b’ characters
are converted directly to ‘c’.body { text-replace: "a" "b" "b" "c" }
body { text-replace: "a" "c" "b" "c" }
So the processing order goes:
1. andy lives behind cafe
2. bndy lives behind cbfe
3. cndy lives cehind ccfe
Best way to replace a text using CSS
If you really need to do such things in CSS, the following is a little more logical and a little less risky (with the Usual CSS Caveats in mind):
<style>
.company-name:after{
content: "New Company Name";
}
</style>
<span class="company-name"></span>
That is, use an element with empty content, so you don’t need any trick to hide the dummy content.
How to use CSS to replace or change text?
You could do something crazy like this.
live demo
.lfr-panel-title span{
display:none;
}
.lfr-panel-title:after{
content: "links";
}
But like everyone points out.. its not recommended.
CSS - replace part of content text
No, in pure CSS it's not possible to change the content, but you could cheat by overlapping something, e.g.
.replacer {
font-family: monospace;
position: relative; }
.replacer::before {
background: #fff;
position: absolute;
content: "***";
}
Codepen demo
or, another tricky way could be creating and loading a special font that maps the symbols A
, B
and C
into the asterisk sign (through the unicode-range
property, https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range)
in javascript you would only need to replace the textContent
property of the element
var el = document.getElementsByClassName('replacer')[0]
el.textContent = el.textContent.replace(/^.{3}/, '***');
How to remove type=text/css property from string?
I don't know why you want to do that but I guess a simple replace
will work :
var styleWithoutAttr = styleTags.replace("type='text/css'", '')
And if you want to handle the possibility of simple or double quotes you can do :
var styleWithoutAttr = styleTags.replace("type=['\"]text/css['\"]", '')
Related Topics
Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px
Resize Unknown Number of Elements to Fill Width of Parent Container
Chrome Columns Bug When Number of Columns Is Less Then Column-Count
Box Sizing on Inputs in Firefox Hides Text
Making a CSS Footer Either Sit at the Bottom of the Browser Window or Bottom of Content
Inline Svg Breaks in Safari and Mobile Safari
How to Prevent Hidden Element to Be Shown When Focused in Chrome
How to Override Bootstrap 3 Styles with External Custom CSS
How to Get Rid of Input Border in Chrome
How to Toggle Two CSS ':Checked' Pseudo-Classes with One Click
Font-Awesome Extjs Actioncolumn
CSS Wild Card for Complex Id'S
Align Block Elements on Top When Using Line-Height
Floating Image to the Left Changes Container Div's Height
How to Change the Style of a Ant-Design 'Select' Component