On
Since you ask for advise, here is some:
Do not use a css class to signify anything concrete, let it signify intent.
The concrete implementation of the intent comes in the css. For instance, do not create a class named width-9, rather create one named portal-column-content. You can then make portal-column-content be width:9px, width:12em or whatever.
Doing a string-replace like this is not really a thing you would do with xslt. Even though you could. Depending on your setup there are other, better ways.
If you can't/won't follow any of the above advise, try
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
<xsl:template match="@class">
<xsl:attribute name="class">
<xsl:value-of select="substring-before(.,'width-9')"/>width-12<xsl:value-of select="substring-after(.,'width-9')"/>
</xsl:attribute>
</xsl:template>
</xsl:stylesheet>
This XSLT 1.0 transformation:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="node()|@*">
<xsl:copy>
<xsl:apply-templates select="node()|@*"/>
</xsl:copy>
</xsl:template>
<xsl:template match="div[@id='portal-column-content']/@class">
<xsl:attribute name="class">
<xsl:value-of select=
"substring-before(concat(.,'width-9'), 'width-9')"/>
<xsl:value-of select="'width-12'"/>
<xsl:value-of select="substring-after(., 'width-9')"/>
</xsl:attribute>
</xsl:template>
</xsl:stylesheet>
when applied on the following sample XML document:
<html>
<div id="a" class="a"/>
<div id="b" class="b"/>
<div id="c" class="cell width-9 position-1:4"/>
<div id="portal-column-content" class="cell width-9 position-1:4"/>
<div id="d" class="d"/>
<div id="e" class="cell width-9 position-1:4"/>
</html>
produces the wanted, correct result (only replaced is the 'width-9' substring of the class attribute of any div that has id attribute with string value 'portal-column-content':
<html>
<div id="a" class="a"></div>
<div id="b" class="b"></div>
<div id="c" class="cell width-9 position-1:4"></div>
<div id="portal-column-content" class="cell width-12 position-1:4"></div>
<div id="d" class="d"></div>
<div id="e" class="cell width-9 position-1:4"></div>
</html>
Do note:
Only replaced is the 'width-9' substring of the class attribute of any div that has id attribute with string value 'portal-column-content'. Other div elements that have a different id attribute aren't affected.
The transformation correctly works with class attributes, whose string value doesn't contain 'width-9' -- compare with the other answer, whose XSLT solution in such case completely replaces the string value of the class attribute with 'width-12'.
Since you've tagged this with "diazo", the simplest solution is probably to use diazo rules. Just use a replace, before or after rule to copy content children of #portal-column-content to the theme children of a correctly classed #portal-column-content.
Use an "if" expression if it's to be done selectively.