修改HTML文本和替換它

Question

我工作的一個HTML列表全名對，每個名字被寫在這個格式：

「名字 - 姓氏/」 （例如：約翰史密斯/ ）

所以我很好奇，想知道我是否可以使用JavaScript來改變文本的格式爲：

「名字姓氏」 （例如：John Smith）

由於我對JavaScript比較陌生，而且我還沒有對它做過很多工作，所以我還沒有做到這一點。

下面是HTML列表的一個片段：

<ul> 
<li><a href="john-smith/"> john-smith/</a></li> 
<li><a href="joe-smith/"> joe-smith/</a></li> 
<li><a href="gina-smith/"> gina-smith/</a></li> 
<li><a href="tom-smith/"> tom-smith/</a></li> 
<li><a href="peter-smith/"> peter-smith/</a></li> 
</ul> 

另外，如果我不太清楚，我不想改變HREF，只是顯示的實際文本。

Answer 1

你可以用正則表達式做到這一點：

var REGEX_FIND = /(.*?)-(.*?)\/$/; 
 

 
//From: http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript 
 
function capitalizeFirstLetter(string) { 
 
    return string.charAt(0).toUpperCase() + string.slice(1); 
 
} 
 

 
$('ul li a').each(function() { 
 
    var text = $(this).text().trim(); 
 
    
 
    var m; 
 
    
 
    if ((m = REGEX_FIND.exec(text)) !== null) { 
 
    $(this).text(capitalizeFirstLetter(m[1]) + ' ' + capitalizeFirstLetter(m[2])); 
 
    } 
 
}); 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li><a href="john-smith/"> john-smith/</a></li> 
 
<li><a href="joe-smith/"> joe-smith/</a></li> 
 
<li><a href="gina-smith/"> gina-smith/</a></li> 
 
<li><a href="tom-smith/"> tom-smith/</a></li> 
 
<li><a href="peter-smith/"> peter-smith/</a></li> 
 
</ul>

Answer 2

或者你可以做這樣的

jsFiddle

// target the anchor tags inside the list items 
 
var namesList = document.querySelectorAll('#namesList li a'); 
 

 
// loop through 
 
for (var i = 0; i < namesList.length; ++i) { 
 

 
    // text value, use trim to get rid of spaces on right and left sides of the string 
 
    var text = namesList[i].textContent.trim(), 
 
    
 
    // number of chars in text - 1, thus we automatically eliminate the last 
 
    // char "/" in each string 
 
    textL = text.length - 1, 
 
    firstName, lastName, theIndex; 
 

 
    // we determine the number where the symbol - lies 
 
    theIndex = text.indexOf('-'); 
 
    
 
    // for firstName, turn the first char to upper case, and append 
 
    // characters from the second char to the index of "-" minus 1 
 
    firstName = text.charAt(0).toUpperCase() + text.substring(1, theIndex); 
 
    
 
    // for lastName, turn the first char AFTER the index of "-" to upper case, and append 
 
    // characters from index + 1 to the value of text length 
 
    lastName = text.charAt(theIndex + 1).toUpperCase() + text.substring(theIndex + 2, textL); 
 
    console.log(firstName + ' ' + lastName); 
 
    
 
    // join firstName and lastName with space in between 
 
    namesList[i].textContent = firstName + ' ' + lastName; 
 
}

<ul id="namesList"> 
 
    <li><a href="john-smith/"> john-smith/</a></li> 
 
    <li><a href="joe-smith/"> joe-smith/</a></li> 
 
    <li><a href="gina-smith/"> gina-smith/</a></li> 
 
    <li><a href="tom-smith/"> tom-smith/</a></li> 
 
    <li><a href="peter-smith/"> peter-smith/</a></li> 
 
</ul>