Javascript：我如何找到某個班級並將帶有編號ID的SPAN添加到每個單詞中？

我試圖讓平原（沒有jQuery，mootools等）JavaScript添加帶有編號ID的span標籤給某個類中的每個單詞。Javascript：我如何找到某個班級並將帶有編號ID的SPAN添加到每個單詞中？

例如：

<p class="read-aloud"> 
    Here's a test. 
</p>

將成爲

<p class="read-aloud"> 
    <span id="word001">Here's</span> <span id="word002">a</span> <span id="word003">test.</span> 
</p>`

標點符號需要被包括在內，但不報價。

我有這個（我已經從另一篇文章修改）：

function add-readAloud-uIDs(matchClass) 
    { 
    var elems = document.getElementsByTagName('*'),i; 
    for (i in elems) 
     { 
     if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1) 
      { 
      elems[i].innerHTML.replace(/\b([A-Za-z][a-z]*?-?’?'?[a-z]*?\.?,?!?\??)([ | 」])("?)/g, '<span id="word">$1</span>$2$3'); 
      } 
     } 
    } 

window.onload = function() 
    { 
    add-readAloud-uIDs("read-aloud"); 
    }

此外，在jsfiddle

我無法找到一種方法來遞增的ID。我該怎麼辦？

此外，我不想使用js庫的原因是因爲這將在iPad上運行。性能非常重要，而且可以靈活地將任何庫用於其他目的而不會發生衝突。

來源

2012-03-10 Arktype

你的函數名稱是無效的（連字符），所以實際上沒有任何執行。這是你的實際代碼嗎？ – pimvdb 2012-03-10 21:34:04

@pimvdb這是我的實際代碼，但它不起作用。現在我知道爲什麼......謝謝。 – Arktype 2012-03-10 23:40:57

您可以使用自定義的這樣的替換功能：

var items = document.getElementsByClassName('readAloud'); 

var idCntr = 1, item; 
for (var i = 0; i < items.length; i++) { 
    item = items[i]; 
    item.innerHTML = item.innerHTML.replace(/[^\s]+/g, function(match) { 
     return('<span id="word' + idCntr++ + '">' + match + '</span>'); 
    }); 
}

示範：http://jsfiddle.net/jfriend00/5v54f/

一個詞的定義，我選擇了不包含空格的任何字符序列，但顯然可以根據自己的喜好調整正則表達式。

來源

2012-03-10 22:23:44 jfriend00

這很好，謝謝！我以爲你不能通過一個容易使用JavaScript的類名獲取元素，只有ID。 – Arktype 2012-03-10 23:39:31

@Arktype - 只是你知道，在IE9之前的IE中不支持getElementsByClassName'（你可以在這裏看到瀏覽器支持（http://caniuse.com/getelementsbyclassname））。如果您打算使用它，您可以實現一個短暫的填充程序，如果本地功能不存在，則可以在IE中提供該功能。你可以在這裏看到它的實現（http://stackoverflow.com/a/1820237/816620），並閱讀一些速度問題[here]（http://ejohn.org/blog/getelementsbyclassname-speed -comparison /）。 – jfriend00 2012-03-10 23:45:01

@Arktype - 個人而言，我在我的項目中使用jQuery，YUI或Sizzle庫，並且它們都帶有一個完整的選擇器庫，用於處理所有舊瀏覽器的DOM查詢和瀏覽器支持。它可以節省大量的時間，並且可以節省大量的錯誤。如果你需要的是選擇查詢並且不想要更大的庫，那麼Sizzle是非常輕量級的。 – jfriend00 2012-03-10 23:52:02

我認爲基本的想法是使用regexp替換一個函數。小例子下面可以有希望成爲一個起點：

var text = "Here's a test"; 
var rx = /\b[\w']+\b/g; 

var fn = function(str) { 
    fn.wordCount += 1;  
    return '<span id="word' + fn.wordCount + '">' + str + '</span>'; 
} 
fn.wordCount = 0; 

result = text.replace(rx, fn); 
// result has '<span id="word1">Here's</span> <span id="word2">a</span> <span id="word3">test</span>'

您將需要修改的正則表達式匹配的話，可能有更多的，你會想在[\w']集內的字符匹配。

替換函數使用類似於靜態變量wordCount的東西來跟蹤發生了多少替換並將其用作跨度中的標識。

每次調用替換文本必須設置fn.wordCount = 0;

來源

2012-03-10 22:17:35 dave

Javascript：我如何找到某個班級並將帶有編號ID的SPAN添加到每個單詞中？

回答

相關問題