Javascript來插入輸出數字「/」格式化

-3

基本上我有8個數字組成的簡單格式化日期輸出這樣的日期：Javascript來插入輸出數字「/」格式化

<div class="date">20170822</div>

，並尋找一個簡單的JS/jQuery腳本插入「/」第4和第6位後，使其：

<div class="date">2017/08/22</div>

感謝，感謝所有幫助:)

來源

2017-09-22 Lawyer

你嘗試過這麼遠嗎？看看[遊覽]和[問]。 –

你應該顯示你試圖讓我們知道你至少試圖研究的代碼。你可以在這裏做的是使用子字符串。 – schylake

您是否嘗試過使用[slice]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice）方法？ – Ammar

-1

的/字符需要插入字符集。 JavaScript數組有一個.splice()做這種事情的方法，但字符串不是真正的數組，它們是「數組式」的對象。但是，它們可以非常容易地轉換爲真正的數組。

從MDN：

陣列狀物體

slice方法也可以叫陣列狀物體/ 集合轉換成一個新的數組。您只需將該方法綁定到該對象。函數內部的參數是'類似數組對象'的示例。

一旦做到這一點，在Array.splice()方法就能解決問題。

var divs = document.querySelectorAll(".date"); // Get all the divs into a node-list (array-like object) 
 

 
// Convert the node list to an array (so Array.forEach can be used) and loop over the array 
 
[].slice.call(divs).forEach(function(d){ 
 
    var sAry = [].slice.call(d.textContent); // Convert the text content of the div to an array 
 

 
    // Insert the/at the index positions 
 
    sAry.splice(4,0,"/"); 
 
    sAry.splice(7, 0, "/"); 
 

 
    d.textContent = sAry.join(""); // Update the div with the formatted value 
 
});

<div class="date">20170822</div> 
 
<div class="date">20170822</div> 
 
<div class="date">20170822</div> 
 
<div class="date">20170822</div> 
 
<div class="date">20170822</div> 
 
<div class="date">20170822</div>

來源

2017-09-22 20:34:11

爲什麼每個人都在尋找複雜的解決方案：簡單的'd.innerText.split（''）'比'[] .slice.call（d.textContent）'更具可讀性'。將字符串轉換爲數組並返回也不是最簡單的代碼，當在一行中簡單的'substr（）'三次也足夠時 – smnbbrv

@smnbbrv因爲堆棧溢出是知識庫。答案應該教育以及回答這個問題。我的代碼的編寫方式是明確提請注意字符串需要轉換的事實。 –

所以現在每個開發人員都會用'+'來代替簡單的'substr'來編寫這些操作符，並且自稱是一個很酷的人 – smnbbrv

您可以使用簡單的JS這樣做

$(document).ready(function(){ 
 
$(".date").each(function(i,elem) { 
 
    var divdate = $(this).html(); 
 
    var lenght = divdate.length; 
 
    var newdate = ''; 
 
    
 
    for(var i = 0;i<lenght;i++){ 
 
     if(i==3){ 
 
     
 
     newdate += divdate[i] +'/'; 
 
     } 
 
     else 
 
     if(i==5){ 
 
      newdate += divdate[i] +'/'; 
 
     } 
 
     else{ 
 
     newdate += divdate[i]; 
 
    } 
 
    } 
 
    $(this).html(newdate);}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="date">20170822</div> 
 
<div class="date">20191229</div> 
 
<div class="date">20161025</div> 
 
<div class="date">20150620</div>

來源

2017-09-22 20:43:14 M0ns1f

適用於斜槓，謝謝。你能否同時支持幾個div？我有8個不同的日期在同一頁上，它給了我所有人完全相同的輸出/日期現在 – Lawyer

@Lawyer完成，查看代碼，所有與'''''''''''div'的分區 – M0ns1f

謝謝！完美的作品 – Lawyer

您可以使用正則表達式像 "20170822".replace(/^([0-9]{4})([0-9]{2})([0-9]{2})/, "$1/$2/$3");

var els = document.querySelectorAll(".date"); 
 
els.forEach(function(el){ 
 
    var d = el.innerHTML; 
 
    el.innerHTML= d.replace(/^([0-9]{4})([0-9]{2})([0-9]{2})/, "$1/$2/$3"); 
 
    
 
});

<div class="date">20170822</div> 
 
<div class="date">20170102</div> 
 
<div class="date">20170408</div> 
 
<div class="date">20170310</div>

來源

2017-09-22 20:51:52 cbertelegni

謝謝，很好地工作，但只在第一個div上，我有8個，你可以在同一頁面上添加對serveral div的支持嗎？ – Lawyer

是的！現在編輯示例，querySelector採用第一個節點，使用querySelectorAll：https://codepen.io/cbertelegni/pen/EwgGKb?editors=1111 '''var els = document.querySelectorAll（「。date」）; （[0-9] {2}）（（）（）（）（）（） [0-9] {2}）/，「$ 1/$ 2/$ 3」）; }）; ''' – cbertelegni

@Lawyer查看我的更新答案，瞭解處理所有日期的方法。 –

Javascript來插入輸出數字「/」格式化

回答

相關問題