Javascript：我如何找到某个类并将带有编号ID的SPAN添加到每个单词中？

我试图让plain（没有jQuery、mootools等）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>`

这是一个测试。
`

需要包括标点符号，但不包括引号

我有这个（我从另一篇文章中修改）：

函数添加只读UID（matchClass）
{
var elems=document.getElementsByTagName（'*'），i；
for（i在elems中）
{
if（（“+elems[i].className+”）.indexOf（“+matchClass+”）>-1）
{
elems[i].innerHTML.replace（/\b（[A-Za-z][A-z]*？-？'？'？'？[A-z]*？\？，？！？\？）（[|]）（“？）/g，$1$2$3”）；
}
}
}
window.onload=函数（）
{
添加朗读UID（“朗读”）；
}

​ 也在

我找不到增加ID的方法。我该怎么做

---

另外，我不想使用js库的原因是，它将在iPad上运行。性能很重要，并且可以灵活地将任何一个库用于其他需要的用途，而不会产生冲突。

我认为基本思想是使用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>'

var text=“这是一个测试”；
变量rx=/\b[\w']+\b/g；
var fn=函数（str）{
fn.wordCount+=1；
返回“+str+”；
}
fn.wordCount=0；
结果=文本。替换（rx，fn）；
//结果是“这是一个测试”

您需要修改regexp以匹配单词，可能需要在

[\w']

集中匹配更多字符

replacement函数使用静态变量

wordCount

跟踪发生了多少次替换，并将其用作span中的id

---

每次调用替换文本都必须设置

fn.wordCount=0；

您可以使用如下自定义替换函数：

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>');
    });
}

var items=document.getElementsByClassName（'readaughoused'）；
变量idCntr=1，项目；
对于（变量i=0；i

演示：

---

对于单词的定义，我选择了不包含空格的任何字符序列，但是您可以根据自己的喜好调整正则表达式。

您的函数名无效（连字符），所以实际上什么都没有执行。这是你的实际代码吗？@pimvdb这是我的实际代码，但它不起作用。现在我知道为什么了…谢谢。这很好，谢谢！我以为你不能用JavaScript用类名轻松地获取元素，只有ID。@Arktype-你知道，

getElementsByClassName

在中不受支持IE9之前的IE（您可以看到浏览器支持）。如果您计划使用它，您可以在IE中实现一个短的垫片，在本机功能不存在的情况下提供该功能。您可以看到它的实现，并了解一些速度问题。@Arktype-就个人而言，我在项目中使用jQuery、YUI或Sizzle库，所有这些都带有完整的选择或者是一个库，它负责所有的DOM查询和所有旧浏览器的浏览器支持。它可以节省大量的时间，不用担心跨浏览器的问题，也可以避免大量的bug。如果您只需要选择器查询，而不需要更大的库，那么Sizzle是非常轻量级的。这一点很好。对于这个应用程序来说，它将是严格意义上的webkit，因此它不会被忽略一个问题。我将研究Sizzle，大多数时候我所追求的都是这样简单的东西。我看到了使用JS库的理由，我想没有理由不使用JS库。谢谢！

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>');
    });
}