CODEWITHSUNDEEP
jqueryhtmlcss
dsdeveloper
dsdeveloper

Reputation: 92

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 E.g

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

to

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

Upvotes: 0

Views: 2589

Answers (6)

Pranav C Balan
Pranav C Balan

Reputation: 115202

In jQuery use attr() with callback to iterate update based on old value and replace() method for replacing capitalized first letter in word.

$('a[title]') // retrieve all a tag with  title attribute
  .attr('title', function(i, old) { // iterate over the title attribute of each eleement
    return old.replace(/\b\w/g, function(m) { // update old title attribute by getting first letter of each word
      return m.toUpperCase(); // convert first letter to capital
    })
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" title="this is title in lowercase">link</a>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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>

References:

Upvotes: 3

Ashish Kumar
Ashish Kumar

Reputation: 3039

In order to do that, first let's have a function which can do it for you based on the string passed as param and then use jquery to do it globally for whatever selected we want to do on.

Working example:

$(function() {
  // Utility function
  function toTitleCase(str) {
    return str.replace(/\w\S*/g, function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }

  // doing it with jQuery
  $("a[title]").each(function() {
    $(this).attr("title", toTitleCase($(this).attr("title")));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" title="some text here">text 1</a>
<a href="#" title="some new text here">text 2</a>
<a href="#" title="some another text here">text 3</a>

this should do the trick... :)

Note: Utility function take from here: Convert string to title case with JavaScript

Upvotes: 0

yoavmatchulsky
yoavmatchulsky

Reputation: 2960

that was rather fun

<script>
(function() {
  [].forEach.call(document.querySelectorAll('[title]'), function(element) {
    var words = element.title.split(/\s+/);
    var capitalized = words.map(function(word) {
      return word[ 0 ].toUpperCase() + word.slice(1);
    });
    element.title = capitalized.join(' ');
  });
})();
</script>

I first selected all the elements with a title attribute (querySelectorAll('[title]')), then I go over each of the elements, extracting the title itself and splitting it to words using .split that works on all the whitespace. Then I iterate over the words, mapping each word to its capitalized word (take the first letter, capitalize it, and add the rest of the word).

At the end I simply join back the words using a space.

Upvotes: 0

C14L
C14L

Reputation: 12548

In CSS, you can capitalize the innerHTML of an element, but not the title attribute. So you will need to use JavaScript. 

var elems = document.getElementsByTagName('a');

for (el in elems) {
    if (el.hasAttribute('title') {
        var str = el.getAttribute('title');
        str = titleCase(str);
        el.setAttribute('title', str);
    }
}

function titleCase(str) {  
  str = str.toLowerCase().split(' ');

  for(var i = 0; i < str.length; i++){
    str[i] = str[i].split('');
    str[i][0] = str[i][0].toUpperCase(); 
    str[i] = str[i].join('');
  }
  return str.join(' ');
}

The titleCase function is from here.

Upvotes: 0

Ankush Rishi
Ankush Rishi

Reputation: 3150

The simplest solution is use str.toUpperCase();

See this example:uppercase

Upvotes: 0

Related Questions