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">
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:
The simplest solution is use str.toUpperCase();
See this example:uppercase
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.
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>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
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.
