Question

我有以下div。其中的文字将是动态的。

<div class="full_name">Libin Babu</div>

我希望结果为Libin B.

那就是我想将第二个名称改为第一个字母，然后是“点”。有没有CSS或jQuery的帮助？我更喜欢css解决方案。

感谢。

Answer 1

您可以使用replace / regex：

"Libin Babu".replace(/^(\S+)\s+(\S).*/, '$1 $2.')
// "Libin B."

要替换它，您可以使用：

$('.full_name').each(function (d, div) {
    $(div).text($(div).text().replace(/^(\S+)\s+(\S).*/, '$1 $2.'));
});

正则表达式解释：

/          // Regex start
  ^        // Beggining of the string
  (\S+)    // One or more non-whitespace characters in group $1
  \s+      // One or more whitespace characters
  (\S)     // Exactly one non-whitespace character in group $2
  .*       // Any number of any characters
/          // Regex end

Answer 2

var str = $('#div').text();
var ret = str.split(" ");
your required value = ret[0] + ' ' + ret[1].charAt(0);

但是，您需要验证第二个字符串长度是否为> = 1。

Answer 3

You can use java script substring. example. 

Script (place this in header section)
-----------------------------
<script language="javascript">
    function splitword(word){
        var your_str = word;
        var str1 = your_str.substr(0,your_str.indexOf(' '));
        var str2 = your_str.substr(your_str.indexOf(' ')+1);
        var str2 = str2.substr(0,1);    
        alert(str1+" "+str2+".");   
    }
</script>


HTML (place this in body section)
--------------------------------
<div class="full_name">Libin Babu</div>
<input type="button" value="Split" onclick="splitword('Libin Babu');" />

使用css / js将第二个单词修剪为第一个字母

3 个答案: