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添加到每个单词中？

回答

相关问题