如何将标题分解成部分并添加html span标签 [英] how to break heading into parts and add html span tag

问题描述

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

我有一个标题

 < h1 class =entry -titleitemprop =headline> 
这是：标题（不同部分）
< / h1> 
  

问题是，有可能在jquery的帮助下，我可以将上面的标题into

 < h1 class =entry-titleitemprop =headline> 
这是：< span class =block1>一个标题（< span class =block2>在不同部分< / span>）< / span> 
< / h1> 
  

好心的人们帮助我如何用jquery做到这一点。

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

  var textStr = $（ '.entry-title'）。text（），//这是：标题（不同部分）
 bit = textStr.match（/(**:)(.* \（）（[\\ \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\''） [2] +'< span class =block2>'+ bit [3] +'< / span>）< / span>'; 
 
 $（'。entry-title'）。html（newHtml）; 
  

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

  var textStr = $（'。entry-title'）。text（）
 //获取元素中的文本
 
 newHtml = bit [1] +'< span class =block1>'... 
 //从正则表达式比特创建html字符串
 
 $（'。entry-title'）。html（newHtml）; 
 //将元素html内容设置为新字符串。 
  

现在是正则表达式。 match方法返回与'（）'中任何内容相对应的元素数组。更多信息可在此处找到。所以这里被分解了：

 （。* :) 
   。是任何字符的通配符，除了换行外， * 指示它继续直到它找到下一个正则表达式，它是： 
 （。* \ （）
  
除了我们希望在（。因为这是一个特殊字符，所以我们用\\\\\\\\\\\\\' s] *）
  

最后，我们需要任何数字 \d ，单词 \ w 或空格字符 \ s ，以便它在碰到最后一个'）'时停止。

每次更改req时，请改用它：

  bit = textStr.match（/（。*：）（ [\ d \ w \s] *）\（（[\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' 块1 >'+ bit [2] +'< span class =block2>（'+ bit [3] +'）< / span>< / span>'; 
  

I am not very good with jQuery but I have a question to ask.

I have a heading

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

The question is, is that possible that with the help of jquery, I can convert the above heading tag into

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

kindly guys help me how can i do that with jquery.

解决方案

Here's a possible regex:

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 );

Okay, to explain what's happeining here, first the simple lines:

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.

Now for the regex. The match method returns an array of elements corresponding to whatever is in '()'. More info can be found here. So here it is broken down:

(.*:) 

the . is a wild card for any character except for a new line, the * tells it to continue until it finds the next piece of the regex, which is the :

(.*\()

same as the previous, except we want it to stop on the (. Since that's a special character, we escape it with a \

([\d\w\s]*)

Last we want any digit \d, word \w, or space character \s, so that it will stop when it hits the last ')'.

Per change in req, use this instead:

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标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！