Question

我有一个有60页的网站，在这里所有的title属性值都是小写的，我想在css或jQuery中大写这个 E.g

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

到

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

Answer 1

这不能在CSS中完成，因为CSS只会改变HTML的表示，而不是基础数据或属性。因此，JavaScript是您在这种情况下唯一的解决方案。为此，我建议：

// 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();
  });
});

＆＃13;

Array.from(document.querySelectorAll('[title]')).forEach(function(el) {
  return el.title = el.title.replace(/\b([a-z])/g, function(m){
    return m.toUpperCase();
  });
});

＆＃13;

a::before {
  content: attr(title);
}

＆＃13;

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

＆＃13;

参考文献：

Answer 2

最简单的解决方案是使用str.toUpperCase();

请参阅此示例：uppercase

Answer 3

在CSS中，您可以将元素的innerHTML大写，但不能大写title属性。所以你需要使用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(' ');
}

titleCase函数是from here。

Answer 4

在jQuery中使用带有回调的 attr() 来基于旧值迭代更新，并使用 replace() 方法替换单词中的大写首字母。< / p>

$('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>

Answer 5

为了做到这一点，首先让我们有一个函数可以根据作为param传递的字符串为你做，然后使用jquery为我们想要做的任何选择全局做。

工作示例：

$(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>

这应该可以解决问题......：）

注意： 效用函数从此处开始： Convert string to title case with JavaScript

Answer 6

这很有趣

<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>

我首先选择了所有带有 title 属性（querySelectorAll('[title]')）的元素，然后我查看每个元素，提取标题本身并使用{{1将其拆分为单词适用于所有空白的。然后我迭代这些单词，将每个单词映射到它的大写单词（取第一个字母，将其大写，然后添加单词的其余部分）。

最后，我只是使用空格加入这些词。

标题属性值以小写字母更改为大写

6 个答案: