dsdeveloper dsdeveloper - 1 year ago 88
jQuery Question

Title attribute value change in lowercase to uppercase

I have a Website having 60 pages and in this all title attribute value are in lowercase and I want to in capitalize I this possible in css or in jQuery

<a href="#" title="this is title in lowercase">


<a href="#" title="This Is Title Capitalize">

Answer Source

This cannot be done in CSS, due to the fact that CSS only alters the presentation of HTML, not the underlying data or attributes. Therefore JavaScript is your only solution in this case. To that end I'd suggest:

// retrieving all elements with a title-attribute, using
// document.querySelectorAll(), and converting that into an Array
// using Array.from.
// we then use Array.prototype.forEach() to iterate over each of
// those nodes:
Array.from(document.querySelectorAll('[title]')).forEach(function(el) {
  // 'el' (the first argument) is the current Array-element of the
  // Array over which we're iterating.

  // here we use String.prototype.replace() to replace a the
  // captured string `[a-z]` (lower-case only) which follows a
  // a word-boundary (`\b`) finding all matches (g) from the supplied
  // string, and using the anonymous function of the replace() method:
  return el.title = el.title.replace(/\b([a-z])/g, function(m){

    // here we return the match ('m') once we've converted it
    // to uppercase using String.prototype.toUpperCase():
    return m.toUpperCase();

Array.from(document.querySelectorAll('[title]')).forEach(function(el) {
  return el.title = el.title.replace(/\b([a-z])/g, function(m){
    return m.toUpperCase();
a::before {
  content: attr(title);
<a href="#" title="this is title in lowercase"></a>