JavaScript:如何使用包含唯一 id 的 span 标签将每个单词包装在字符串中? [英] JavaScript: How can I wrap every word in a string with a span tag containing a unique id?

问题描述

使用 Javascript，我想获取一个字符串的内容并用一组 标签包裹每个单词.每个 span 标签都有一个我将生成的唯一 ID 属性.如果一个单词已经包含在带有 id 的 span 标签中，请不要管它.如果它有一个没有id的span标签，我需要在span中放一个id.

Using Javascript, I want to take the content of a string and wrap every single word with a set of <span> tags. Each span tag will have a unique ID attribute that I'll generate. If a word is already encased in a span tag with an id, leave it alone. If it has a span tag without an id, I need to put an id in the 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 方法.

Ideas on the best way to accomplish this? I'm doing it server-side in node.js. I prefer a non-jquery method.

id 是我将在服务器上生成的东西.我现在只使用占位符假 ID.我将使用我自己的全球唯一 ID.

The id is something I will generate on the server. I just used placeholder fake ids for now. I will use my own globally unique id.

推荐答案

你可以试试这个，但如果你想对已经在 html 标签中的单词进行特殊处理，你可能需要检查参数 a :

You can try this, but you might have to inspect the parameter a if you want to make a special treatment for your word already in html tag :

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，你可以试试这个

If you don't want to overwrite existing ID, you can try this

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/

如果您可以在一个标签中包含多个单词，并且您仍然希望将每个单词包装在它们之间，您可以使用标签内的值递归调用替换函数，如下所示:

If you can have multiple word in a tag like and you still want to wrap each word in between, you can call recursively the replace function with the value inside the tag as so :

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/

这篇关于JavaScript:如何使用包含唯一 id 的 span 标签将每个单词包装在字符串中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！