Question

我对jQuery不太满意，但我有一个问题要问。

我有一个标题

<h1 class="entry-title" itemprop="headline">
    This is: a heading (in different parts)
</h1>

问题是，有可能在jquery的帮助下，我可以将上述标题转换为

<h1 class="entry-title" itemprop="headline">
    This is: <span class="block1">a heading (<span class="block2">in different parts</span>)</span>
</h1>

亲切的帮助我，我怎么能用jquery做到这一点。

Answer 1

这是一个可能的正则表达式：

var textStr = $('.entry-title').text(), //This is: a heading (in different parts)
    bit = textStr.match(/(.*:)(.*\()([\d\w\s]*)/), //I simplified this, overwrote it the first time
    newHtml = bit[1] +'<span class="block1">'+bit[2]+'<span class="block2">'+bit[3]+'</span>)</span>';

$('.entry-title').html(newHtml );

好的，要解释这里发生了什么，首先是简单的行：

var textStr = $('.entry-title').text()  
//just fetching the text within that element

newHtml = bit[1] +'<span class="block1">'...
//creating an html string from the bits from the regex match

$('.entry-title').html(newHtml );
//setting the elements html contents to the new string.

现在是正则表达式。 match方法返回一个元素数组，对应于＆＃39;（）＆＃39;中的任何元素。可以找到更多信息here。所以这里分解了：

(.*:)

。是除了新行之外的任何字符的外卡， * 告诉它继续直到找到下一部分正则表达式，这是：

(.*\()

与上一个相同，除了我们希望它停在（。因为那是一个特殊字符，我们用\

来逃避它

([\d\w\s]*)

最后我们想要任何数字 \ d ，单词 \ w ，或空格字符 \ s ，以便它在点击时停止最后的＆＃39;）＆＃39;。

每次更改请求时，请改用：

bit = textStr.match(/(.*:)([\d\w\s]*)\(([\d\w\s]*)/),
newHtml =   bit[1] +'<span class="block1">'+bit[2]+'<span class="block2">('+bit[3]+')</span></span>';

如何将标题分解为部分并添加html span标记

1 个答案: