选择h2标签的前两个单词并在span标签中包装

时间:2016-02-17 18:08:58

标签: javascript jquery html css

我想在页面上找到所有h2标签,然后在span标签中包含前两个单词。我检查了this stackoverflow question,但它没有帮助我。

我可以按照这个链接进行操作并且dd跨越前两个单词,但唯一的问题是如果我在h2标签内部有html,例如我在h2标签内部有超链接。

任何人都可以帮助我如何制作此代码,以便忽略html并且只考虑前两个单词?

非常感谢任何帮助!

我的小提琴:

JSFiddle

我的JS:

jQuery(document).ready(function($){ 
    jQuery('h2').html(function (i, html) {
        return html.replace(/(\w+\s\w+)/, '<span>$1</span>')
    });
});

我的HTML:

<h2>
    <a title="test post 2" href="#">
        test text dolor sit enum
    </a>
</h2>
<h2>lorem ipsum dolor sit enum</h2>

5 个答案:

答案 0 :(得分:2)

这对你有用。

&#13;
&#13;
jQuery(document).ready(function($){ 
  jQuery('h2').html(function (i, html) {
    if(/<[a-z][\s\S]*>/i.test(html)) {
      html = jQuery.parseHTML(html);
      return html[0].innerHTML.replace(/(\w+\s\w+)/, '<span>$1</span>');
    }
    return html.replace(/(\w+\s\w+)/, '<span>$1</span>');
  });

});
&#13;
h2 {
  color:#f2f2f2;
}
h2 span {
  color:blue;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a title="test post 2" href="#">test text dolor sit enum</a></h2>
<h2>lorem ipsum dolor sit enum</h2>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用text()功能:

jQuery(document).ready(function($){ 
  jQuery('h2').text(function (i, txt) {
    console.log ( txt.replace(/(\w+\s\w+)/, '<span>$1</span>'))
  });

});

见这里:https://jsfiddle.net/spdthfgx/

答案 2 :(得分:0)

$(function(){
    var h2 = $('h2 > a').html();
    alert(h2.replace(/(\w+\s\w+)/, '<span>$1</span>'));
});

https://jsfiddle.net/y3llowjack3t/jornvLee/3/

答案 3 :(得分:0)

def myfunc():
    return "spot"

myfunc = my_decorator(myfunc)

答案 4 :(得分:0)

使用JQuery获取HTML中的文本,然后使用text()match查找前2个单词,最后将HTML中的文本替换为{{{ 1}}:

<span>

https://jsfiddle.net/j4fd86aw/6/