Change Color Mid-Sentence

I want to auto-magically change the color of a URL in the middle, like this:

domain_name.com

There is no www so the period can be used as delimiter. The URL is generated by PHP so I can not simply use HTML.

 

anybody have a an idea?

 

Wrap the text inside a span and give it a class. Then target the class with a style rule.

Here's an example:

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin dignissim, <span class="highlight">arcu congue ultrices semper</span>, tellus risus condimentum elit, ac bibendum arcu ligula sit amet lorem. Cras quis elit id quam.
</p>

Code (markup):

.highlight {
background: yellow;
}

Code (markup):

 

thank you. i should just posted the code the generates the text

<div id="logo"><span class="red"><?php echo $layouttitle; ?></span></div>

Code (markup):

$layouttitle is not static, so it needs to remain in PHP

 

What does $layouttitle look like then?

 

it is the site name, in the format

SiteName.com

Code (markup):

 

I'd go with this then:

<div id="logo"><?php echo $layouttitle; ?></div>

Code (markup):

With the variable holding this.

<span class='sitename'>SiteName</span>.com

Code (markup):

I went with single quotes because I don't remember if you can use literal double quotes inside echo statements like that. If you can, then feel free to do so.

The CSS would then look like this:

.sitename {
	color: red;
}

Code (markup):

 

ok, but.... here i go again.... the sitename.com is defined by a built in PHP variable. i never define it explicitly (not a code monkey - i think that is the correct term).

i have the PHP website in a folder on the host. i have four or five different domains pointing to that one folder. the variable get set based upon the domain using PHP. (make sense?)

 

Using Regular Expressions in PHP we can identify the part of the text that contains the domain name and wrap it in a span.

Test String: “here is the text surrounding dom-ain.com text and a generic .com name alongwith do.main.net, domain.org and del.co.uk”

Using preg_replace with regular expressions in PHP

<?php

$string = ‘here is the text surrounding dom-ain.com text and a generic .com name alongwith do.main.net, domain.org and del.co.uk’;
$pattern = ‘/([0-9a-zA-Z.\-]+)+(.com|.net|.org|.co.uk)/’;
$replacement = ‘<span style=”color:#F00″>${1}</span>${2}’;
echo preg_replace($pattern, $replacement, $string);

?>



From http://us.php.net/preg-replace

preg_replace — Perform a regular expression search and replace

mixed preg_replace( mixed $pattern ,mixed $replacement ,mixed $subject [,int $limit [,int &$count ]] )

Searches $subject for matches to $pattern and replaces them with $replacement.

The $string will be the text that contains your domain names.

$pattern is a regular expression pattern I constructed following the handy cheat sheet at http://regexlib.com/CheatSheet.aspx and testing it online at http://regexlib.com/RETester.aspx

Deconstructing the regular expression
‘/
- start

([0-9a-zA-Z.\-]+)+
- match all characters from 0-to-9 a-to-z A-toZ and ‘.’ and ‘-’. These are the valid characters for domain names. The ‘+’ signs mean atleast 1 or more of that sequence must be matched

(.com|.net|.org|.co.uk)
- Very literally a ‘.com’, ‘.org’ or ‘.co.uk’ must follow the previous set of characters. You can add additional TLDs here, seperated by a pipe(’|') which acts as an ‘OR’.

/’
- end

The $replacement is a string with the span tag wrapped around ${1} and ${2}, these represent the 1st and 2nd matched sequences, for example ‘domain’ and ‘.com’. ${0} would match the entire ‘domain.com’ string.
Regular Expressions are HARD.

Even for advanced users, here are some resources to help you get started using them.

http://regexlib.com/CheatSheet.aspx- Cheat Sheet
http://regexlib.com/RETester.aspx - Online Tester
http://www.zytrax.com/tech/web/regex.htm - A Simple User Guide
http://www.amk.ca/python/howto/regex/ - Detailed Regular Expression HOWTO

 

I Posted this solution on my blog at
http://www.dedestruct.com/2008/02/06/how-to-using-php-to-change-the-color-of-urls/

you can see it in better formatting there with the span color showing to highlight the edited regions

 

wow. that will take a little while for me to digest!

thanks both of you!

 

ayushsaran, that is most definately one way of doing it, though being the HTML/CSS purist that I am, I'd rather assign a class attribute rather than inlined style to the span, that way the color can be changed on the fly from the stylesheet later on if need be (without having to mess with the regular expression). Though if that span were to be the only one in that DIV with the ID of logo, I'd just go without the class attribute and target the span directly via CSS to change the color.

 

absolutely, it MUST be a class and not inline,

the inline style was added so I can see instant results of the regex replace since the test.php file i was using didn't have any styling on it.

separation of markup and styling is a must.

 

Isn't a regex a little overkill? Couldn't you just do it with string manipulating functions?

 

i took your code sample and tried it out. i needed to replace the single quotes with doubles. when i view it, i see

here is the text surrounding text and a generic .com name alongwith do., and

all in black. i will play with it more.

 

the WYSIWYG on this forum adds funky quotes so you will need to replace all the ' and " with normal ones


regex is complicated and you can use simple things like

str_replace(".com","<span>.com</span>", $text);

but i dont know how to wrap the span on the word before the .com using string replace

 

The OP has the clue to the simpler way to do this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
  <head>
    <title></title>
    <meta name="generator"
          content=
          "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" />
    <meta http-equiv="content-type"
          content="text/html; charset=utf-8" />
    <meta name="editor"
          content="Emacs 21" />
    <meta name="author"
          content="Gary Turner" />
    <style type="text/css">
/*<![CDATA[*/

  .hilite {
    color: red;
    }

    /*]]>*/
    </style>
  </head>
  <body>
<?php
    $domain='domain.com';
    $split_domain=explode('.',$domain,2);
?>
    <p>
      <span class=
      "hilite"><?php echo $split_domain[0];?></span>.<?php echo $split_domain[1];?>
    </p>

    <p>
      By specifying the number of chunks, the final chunk contains
      the remainder.
    </p>

<?php
    $domain='domain.co.uk';
    $split_domain=explode('.',$domain,2);
?>

    <p>
      <span class=
      "hilite"><?php echo $split_domain[0];?></span>.<?php echo $split_domain[1];?>
    </p>
  </body>
</html>

Code (markup):

cheers,

gary

 

@kk5st

what happens when the string you want to pull the domains from has more than just the domain in it for example

"this is a string with a period in it. followed by a domain.com"

it would mess up on the first period wouldn't it

 

Reread the original problem statement. The domain name is provided by some sort of back-end magic. It was further stated there would be no sub-domain, eg. www, so that the dot could be treated as the delimiter.

If the brief were expanded to pick a domain name out of general text, the problem becomes several orders of magnitude more difficult, as you'd have to determine, for example, if a nick I sometimes use, "gary.kk5st", were a legitimate domain name form. What about $27.50?

cheers,

gary

 

@kk5st - thank you. perfect. since posting, i found i need to strip off the subdomain, but i can handle that given the code example. rep given

@ayushsaran - perhaps use your method to extract the whole domain and then using explode to get the final result?