使用html编辑标题标签时发生的jQuery问题（）

问题描述：

基本上，我在网站上加载了H1 H2和H3标签，我希望能够在这些标题标签的PART部分放置一个span。使用html编辑标题标签时发生的jQuery问题（）

目前，我有这样的：

jQuery(document).ready(function(){ 

      // get all headings first 
      jQuery('h1, h2, h3').each(function(){ 
       // get the text 
       var theHtml = jQuery(this).html(); 
       // split by spaces 
       var theWords = theHtml.split(" "); 
       // count the words 
       var wordCount = theWords.length; 
       var newHtml; 
       if(wordCount < 2){ 
        // only one word 
        newHtml = theHtml; 
       } 
       else if(wordCount == 2){ 
        // word count is 2... 
        newHtml = theWords[0]+" <span style='color: #000'>"+theWords[1]+"</span>"; 
       } 
       else { 
        // add the first two words: 
        newHtml = theWords[0]+" "+theWords[1]+" <span style='color:#000'>"; 

        // need to loop through the array now 
        for(var i = 2; i<wordCount; i++){ 
         newHtml = newHtml+theWords[i]; 
         if(i+1 < wordCount){ 
          newHtml = newHtml+" "; 
         } 
        } 

        //end 
        newHtml = newHtml+"</span>"; 
       } 
       jQuery(this).html(newHtml); 
      }); 

     });

这工作得很好。但现在我有一个问题，有时有一个a元素或div（对于内嵌编辑器，如果以管理员身份登录）标题中正在打破此...

我该如何解决这个问题？我需要从标题标签中获取所有的html，去掉HTML标签，在后面添加span，然后把html放回去！

任何想法？

谢谢。

编辑：

这是有问题的HTML是什么样子：

<h1 class="entry-title"><div data-type="input" data-post_id="12" class="fee-field fee-filter-the_title">Bristish Society of Blood and Marrow Transplantation</div></h1>

而像这样：

<h2 class="entry-title"><a href="#" title="Permalink to About the Registry" rel="bookmark"><div data-type="input" data-post_id="62" class="fee-field fee-filter-the_title">About the Registry</div></a></h2>

但是，如果没有登录为管理员，则div的走开。

导致问题的HTML是什么样的？ – Jeremy 2011-05-17 15:22:22

用一些html编辑 – 2011-05-17 15:29:59

答

嘿！不错，我认为这是可能的正则表达式。我为你做了一个快速的例子，其中最重要的部分是a和div。所有不是真实空格的空格（在标签中）被___或---等符号替换，这些符号在之后会改回。看看this jsfiddle！

theHtml = theHtml.replace(/[\s]+\</gi,'<'); 
theHtml = theHtml.replace(/\s+[\'\"]/gi,'___'); 
theHtml = theHtml.replace(/[\'\"]\s+/gi,'---'); 
theHtml = theHtml.replace(/a\s/gi,'a_'); 
theHtml = theHtml.replace(/div\s/gi,'div_');

和向后：

newHtml = newHtml.replace(/___/gi,' "'); 
newHtml = newHtml.replace(/---/gi,'" '); 
newHtml = newHtml.replace(/div_/gi,'div '); 
newHtml = newHtml.replace(/a_/gi,'a ');

COMMENT您的编辑

这不会对您发布的例子h1和h2工作岗位。这只是一个如何解决这个问题的想法。我希望这能帮到您！祝你好运！

注释2后我自己的编辑;-)

它不的工作，我只是忘了添加不区分大小写，并递归性！这还没完成。有更多的支票需要，如'或"等Here you go，我希望这会让你在正确的轨道上。

嘿，这太棒了！这让我想到，如果我使用text（），然后替换html（）中的相关单词来解决这个问题！：）谢谢你的帮助。替换（）是关键！ :) – 2011-05-17 15:55:44

答

请使用jQuery .text()函数去除任何特定H1，H2标签内的所有文本等。这些标签中的其他HTML将被忽略。

但是，我不知道你将如何恢复所有的内部HTML标签回来。

这就是问题所在！：p – 2011-05-17 15:30:13

答

你试过jQuery的wrapInner()函数吗？我认为它只用一行就能满足你的要求。

$('h1, h2, h3').wrapInner('<span></span>');

该功能的问题是（据我所知），它将所有文本包装在其中，而我只希望第一个1或2之后的所有单词包含span，如果您看到我的代码。 – 2011-05-17 15:35:34

答

如果您知道“内部”HTML元素中的类是什么，那么您可以抓住它。

var outer = $('.entry-title'); 
var html = html.find('.fee-field'); 

if(html === null){ 
    html = outer; 
} 

// html will either be your `h` element or your inner most element.

使用html编辑标题标签时发生的jQuery问题（）

相关推荐