使用 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);
编辑:如果您可以在标签中包含多个单词,并且您仍然想将每个单词包装在中间,则可以使用标签内的值递归调用替换函数,如下所示:
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);
关于JavaScript:如何使用包含唯一 id 的 span 标签将字符串中的每个单词包装起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9384444/