j查询使用 html(） 编辑标题标签的问题

jQuery issue with editing heading tags using html()

本文关键字：标题 编辑 标签 问题 查询 html      更新时间：2023-09-26

基本上，我在网站上加载了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（如果以管理员身份登录，则用于内联编辑器），这打破了这一点......

我将如何解决这个问题？我需要从标题标签中获取所有 html，剥离 HTML 标签，在后一部分周围添加跨度，然后将 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将消失。

嘿！不错的一个，我认为这可以通过正则表达式来实现。我为您做了一个简单的例子，涵盖了大部分的 a 和div。所有不是真实空格的空格（在标签中）都将替换为 ___ 或 --- 等符号，之后会改回来。看看这个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在我自己的编辑之后;-）

它确实有效，我只是忘了添加大小写不区分和递归！只是还没有完成。需要更多的检查，例如'或"等。来吧，我希望这会让你走上正轨。

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

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

你试过jQuery的wrapInner（）函数吗？ 我认为它只用一行就能完成你正在寻找的东西。

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

如果你知道"inner"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.
相关文章：