JavaScript: Как мне обернуть каждое слово в строке тегом span, содержащим уникальный идентификатор?

Question

Используя Javascript, я хочу взять содержимое строки и обернуть каждое слово набором тегов <span>.Каждый тег span будет иметь уникальный атрибут ID, который я сгенерирую.Если слово уже заключено в тег span с идентификатором, оставьте его в покое.Если у него есть тег span без идентификатора, мне нужно добавить идентификатор в span.

Итак, следующее:

this is <b>a</b> <span>bunch</span> of <span id="aopksd"><i>text</i></span>

Становится:

<span id="dwdkwkd">this</span> <span id="zdkdokw">is</span> <span id="rrrsass"><b>a</b></span> <span id="lwokdw">bunch</span> <span id="poeokf">of</span> <span id="aopksd"><i>text</i></span>

Идеи о том, как это сделать?Я делаю это на стороне сервера в node.js.Я предпочитаю не-jquery метод.

РЕДАКТИРОВАТЬ: идентификатор это то, что я буду генерировать на сервере.Я только что использовал фальшивые идентификаторы заполнителей.Я буду использовать свой собственный глобально уникальный идентификатор.

Answer 1

Вы можете попробовать это, но вам, возможно, придется проверить параметр a, если вы хотите сделать специальную обработку для своего слова, уже содержащегося в html-теге:

var str = "Bonjour, je m'appelle Francis et je suis le plus bel homme du monde​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​";
var regex = /\S+/g;

var id = 0;

var result = str.replace(regex, function(a) {
    return "<span id=" + (++id) + ">" + a + "</span>";
});​​​​​​​​​​

alert(result);

live demo: http://jsfiddle.net/NtNtj/

РЕДАКТИРОВАТЬ: Если вы не хотите перезаписывать существующий идентификатор, вы можете попробовать это

var str = "Bonjour, je m'appelle <b>Francis</b> et <span id=\"existing\">je</span> suis le plus bel homme du monde";
var regex = /(<.+?<\/.+?>|\S+)/g;

var id = 0;

var result = str.replace(regex, function(a) {

    var m = (/<(\w+)([^>]*)>([^<]*)<\/\w+>/).exec(a);

    if (m !== null && m[1] === "span" && m[2].test(/id=/)) 
        return a;

    return "<span id=" + (++id) + ">" + a + "</span>";
});

console.log(result);

http://jsfiddle.net/NtNtj/8/

РЕДАКТИРОВАТЬ: если вы можете иметь несколько слов в тегеНапример, если вы хотите обернуть каждое слово между ними, вы можете рекурсивно вызвать функцию замены со значением внутри тега следующим образом:

var str = "Bonjour, <b>je m'appelle Francis</b> et <span id=\"existing\">je</span> suis le plus bel homme du monde";
var regex = /(<.+?<\/.+?>|\S+)/g;

var id = 0;

var result = str.replace(regex, function(a) {

    var m = (/<(\w+)([^>]*)>([^<]*)<\/\w+>/).exec(a);

    if (m !== null && m[1] === "span" && m[2].test(/id=/)) 
        return a;

    if (m !== null)
        return "<" + m[1] + m[2] + ">" + m[3].replace(regex, arguments.callee) + "</" + m[1] + ">";

    return "<span id=" + (++id) + ">" + a + "</span>";
});

console.log(result);

live demo: http://jsfiddle.net/francisfortier/NtNtj/9/