Javascript: как мне найти определенный класс и добавить SPAN с нумерованным идентификатором к каждому слову?

Question

Javascript: как мне найти определенный класс и добавить SPAN с нумерованным идентификатором к каждому слову?

Я пытаюсь использовать простой (без jQuery, mootools и т. д.) JavaScript для добавления тегов 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

У меня возникли проблемы с поиском способа увеличения идентификаторов.

Кроме того, причина, по которой я не хочу использовать библиотеку js, заключается в том, что она будет работать на iPad. Важна производительность, а также гибкость в использовании любой библиотеки для других целей, необходимых без конфликтов.

473 2

javascript html

2 ответов:

Comments

Ничего не найдено.

jfriend00 · Accepted Answer · 2012-03-11 00:23:44

Вы можете использовать пользовательскую функцию замены следующим образом:
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('' + match + '');
 });
}
Демонстрация: http://jsfiddle.net/jfriend00/5v54f/

Для определения слова я выбрал любую последовательность символов, которая не содержит пробелов, но вы, очевидно, можете настроить регулярное выражение по своему вкусу.

dave · Accepted Answer · 2012-03-11 00:17:35

Я думаю, что основная идея будет заключаться в использовании regexp replace с функцией. Небольшой пример ниже, надеюсь, может быть отправной точкой:
var text = "Here's a test";
var rx = /\b[\w']+\b/g;

var fn = function(str) {
 fn.wordCount += 1; 
 return '' + str + '';
}
fn.wordCount = 0;

result = text.replace(rx, fn); 
// result has 'Here's a test'
Вам нужно будет изменить регулярное выражение, чтобы оно соответствовало словам, возможно, в наборе [\w'] будет больше символов, которым вы захотите соответствовать.
Функция замены использует что-то вроде статической переменной wordCount, чтобы отслеживать, сколько замен произошло, и использовать ее в качестве идентификатора в промежутке.
Каждый вызов для замены текста будет нужно установить fn.wordCount = 0;