Question

我有一堆动态生成的H1标签。我想在标签中随机选择1个单词，并用斜体标签包装。

这就是我到目前为止所遇到的问题，它是第一个h1动态生成的内容，并将其复制到页面上的每个h1。除此之外，它有效。

有什么想法吗？

var words = $('h1').text().split(' ');

// with help from http://stackoverflow.com/questions/5915096/get-random-item-from-array-with-jquery

var randomWord = words[Math.floor(Math.random()*words.length)];

// with more help from http://stackoverflow.com/questions/2214794/wrap-some-specified-words-with-span-in-jquery

$('h1').html($('h1').html().replace(new RegExp( randomWord, 'g' ),'<i>'+randomWord+'</i>'));

我的最终目标

<h1>This is a <i>title</i></h1>
<h1><i>This</i> is another one</h1>
<h1>This <i>is</i> the last one</h1>

所有标题都将动态生成。

http://codepen.io/anon/pen/uskfl

Answer 1

问题是$('h1')会在页面中创建所有h1标记的集合。

您可以使用html()方法的函数回调，它将遍历每个h1并将它们视为单独的实例

$('h1').html(function(index, existingHtml) {
    var words = existingHtml.split(' ');
    var randomWord = words[Math.floor(Math.random() * words.length)];
    return existingHtml.replace(new RegExp(randomWord, 'g'), '<i>' + randomWord + '</i>');

});

请参阅html() docs （向下滚动1/2页，function参数不在早期版本中）

Answer 2

您可以使用jQuery的.each()来遍历h1。

$('h1').each(function(){
    var words = $(this).text().split(' ');
    var randomWord = words[Math.floor(Math.random()*words.length)];
    $(this).html(
        $(this).html().replace(new RegExp( randomWord, 'g'),'<i>'+randomWord+'</i>')
    );
});

演示：http://jsfiddle.net/RT25S/1/

编辑：我刚刚注意到我的答案中的一个错误也在你的问题中，可能在其他答案中。

在this is another one这样的标题中，is和is都标注了this。 scrowler评论说，当所选单词多次出现在标题中时，所有单词都将用斜体显示，但我怀疑你是否打算将部分单词用斜体字。

修复相对简单。只需检查单词前后的空格。您还必须使用^和$元字符在标题的开头和结尾添加单词。

理想情况下，我们可以使用\b，这是一个“单词边界”，但是当单词以非孤立字符结尾时，它似乎不起作用。

如果包含任何特殊字符，您还应该在将其包含在正则表达式中之前将其随机选中。我从Is there a RegExp.escape function in Javascript?添加了逃避正则表达式。

更新的代码：

$('h1').each(function(){
    var words = $(this).text().split(' ');
    var randomWord = words[Math.floor(Math.random()*words.length)];
    // Escape the word before including it in a regex in case it has any special chars
    var randomWordEscaped = randomWord.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

    $(this).html(
        $(this).html().replace(
            //new RegExp( '\\b' + randomWordEscaped + '\\b', 'g' ),
            new RegExp( '(^| )' + randomWordEscaped + '( |$)', 'g' ),
            '<i> ' + randomWord + ' </i>'
        )
    );
});

更新的JSFiddle：http://jsfiddle.net/RT25S/3/

请注意，我在<i>标记之前和之后添加了空格，因为正则表达式现在可以捕获它们。（这仍然适用于标题开头/结尾的单词，因为HTML会忽略该空格。）

从标签中选择随机字，用斜体包裹

2 个答案: