JavaScript:如何用包含唯一id的span标记将字符串中的每个单词包装起来

JavaScript: How can I wrap every word in a string with a span tag containing a unique id?

本文关键字：字符串 起来 包装 单词 何用包 唯一 span id JavaScript      更新时间：2023-09-26

使用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。

您可以尝试这样做，但如果您想对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/

相关文章：