JavaScript：如何用包含唯一ID的span標簽將每個單詞包裝在字符串中？

Question

我想使用Javascript獲取字符串的內容，並用一組<span>標簽包裝每個單詞。 每個span標簽將具有我將生成的唯一ID屬性。 如果單詞已經用id包裹在span標記中，請不要理會它。 如果它具有不帶id的span標記，則需要在span中放入一個id。

因此，以下內容：

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方法。

編輯：id是我將在服務器上生成的東西。 我現在只是使用占位符偽造的ID。 我將使用自己的全局唯一ID。

Answer 1

您可以嘗試這樣做，但是如果要對html標簽中已有的單詞進行特殊處理，則可能必須檢查參數a：

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

現場演示： http : //jsfiddle.net/NtNtj/

編輯：如果您不想覆蓋現有的ID，可以嘗試此操作

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/

編輯：如果您可以在一個標簽中包含多個單詞，而您仍希望在每個單詞之間進行換行，則可以使用標簽中的值遞歸調用replace函數，如下所示：

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

現場演示： http : //jsfiddle.net/francisfortier/NtNtj/9/