Question

基本上我在网站上有大量的H1 H2和H3标签，我希望能够在这些标题标签的一部分附近加span。

目前我有这个：

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（对于内联编辑器，如果以管理员身份登录），这会打破这个......

我如何解决这个问题？我需要从header标签中获取所有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就会消失。

Answer 1

喂！很好，我认为这可以用正则表达式。我为你做了一个快速的例子，涵盖了最大部分的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 ');

编辑后

这对您发布的示例h1和h2不起作用。这只是如何处理这个问题的想法。我希望这能帮到您！祝你好运！

我自己编辑后

COMMENT2 ; - ）

它工作，我只是忘了添加不区分大小写和递归！它尚未完成。需要进行更多检查，例如'或"等Here you go，我希望这会让您走上正轨。

Answer 2

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

但是，我不确定如何恢复所有内部HTML标记。

Answer 3

您是否尝试过jQuery的wrapInner()功能？我认为它只需要一行即可完成您的工作。

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

Answer 4

如果你知道“内部”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问题

4 个答案: