Question

如果a标记彼此相邻，我如何将<div> <a href='/url.com'>This is</a><a href='/url.com'> the </a><a href='/url.com'>same link.</a> This is not linked but might have some <b>bolding</b> or not. <a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a> </div>标记与相同的网址合并在一起。例如，我正在处理类似于此的html：

<div>
    <a href='/url.com'>This is the same link.</a>
    This is not linked but might have some <b>bolding</b> or not.
    <a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a>
</div>

通过jQuery，我希望div的内部是：

我可以通过遍历每对<div> <a href='/url.com'>This is the same link.These are</a> This is not linked but might have some <b>bolding</b> or not. <a href='/url2.com'> two different links.</a> </div>标签来合并标签，看看它们是否共享（1）相同的链接和（2）相同的父级，但是我得到这样的输出：

$('a').addClass('linkCheck');
while ($('.linkCheck').length > 0) {
        first_to_check = $('.linkCheck:first');
        first_to_check.removeClass('linkCheck');

        if ($('.linkCheck').length > 0) {
            second_to_check = $('.linkCheck:first');

            replaced = false;
            if (first_to_check.attr('href') == second_to_check.attr('href')) {
                found_first = false;

                old_content_html = $('#divID').html();
                old_content_text = $('#divID').text();

                first_to_check.parent().children().each(function () {
                    if (found_first == true && $(this).get(0) == second_to_check.get(0)) {
                        html = second_to_check.html();
                        second_to_check.remove();
                        first_to_check.html(first_to_check.html() + html);
                        found_first = false;
                        replaced = true;

                        if ($('#divID').text() != old_content_text) {
                            replaced = false;
                            $('#divID').html(old_content_html);
                        }

                        return false;
                    }

                    if ($(this).get(0) == first_to_check.get(0)) {
                        found_first = true;
                    }
                    else {
                        found_first = false;
                    }
                });

            }

            if (replaced == true) {
                first_to_check.addClass('linkCheck');
            }
        }

    }

我不知道如何意识到中间有文字。

编辑：这是我尝试过的事情

#update_all

Answer 1

对于每个锚点，查看它的下一个兄弟是否是具有相同href的锚点。如果是这样，请附加其兄弟contents()并移除兄弟姐妹。

您需要使用DOM nextSibling来正确处理文本节点，因为jQuery的next()方法会跳过它们。

只要找到重复的相邻href，就重复：

function merge() {
  var merged;
  do {
    merged = false;
    $('a').each(function() {
      var nexta = $(this.nextSibling);
      if (nexta.attr('href') === $(this).attr('href')) {
        $(this).append(nexta.contents());
        merged = true;
        nexta.remove();
      }
    });
  } while (merged);
} //merge

merge();
$('pre').text($('div').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='/url.com'>This is</a><a href='/url.com'> the </a><a href='/url.com'>same link.</a>
  This is not linked and has <b>bolding</b>.
  <a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a>
  <br>
  <a href='/url.com'>This is</a><a href='/url.com'> the </a><a href='/url.com'>same link.</a>
  This is not linked and does not have bolding.
  <a href='/url.com'>These are</a><a href='/url2.com'> two different links.</a>
</div>
<hr>
Output:
<pre></pre>

Answer 2

看起来这可能是一个简单的操作，但它不会。原因是中间的文本不是它自己的节点，而只是父DIV的innerHTML。基本上你需要做的是通过标签名称获取标签，并且为了检查它们是否彼此相邻，请使用以下代码。

＆＃13;

        var linkTags=document.getElementsByTagName("A");

        for(i=0; i<linkTags.length-1; i++){
            j=i+1;
           indexOfI=document.innerHTML.indexOf(linkTags[i].outerHTML);
          lengthOfI=linkTags[i].outerHTML.length;
          indexOfJ=document.innerHTML.indexOf(linkTags[j].outerHTML);
          if(indexOfI+lengthOfI==indexOfJ){
                //ELEMENTS ARE ADJACENT
            
            }else{
              testFlag=true;
              //GET CONTENTS BETWEEN ELEMENTS AS STRING
              var testString=document.innerHTML.substr(indexOfI+lengthOfI, indexOfJ);
                  //TEST CONTENTS FOR WHITESPACE
                 for(k=0; k<testString.length; k++;){
                       if(testString.char(k)!=" " && testString.char(k)!="\n"){
                           //SET FLAG INDICATING NON WHITESPACE CHARACTER FOUND
                           testFlag=false;
                           //SET K TO LOOPS MAX TO BREAK LOOP
                           k=testString.length;
                         }
                   
                   
                   }
              if(testFlag){
                //ELEMENTS ARE ADJACENTWITH WHITESPACE BETWEEN
                }
              
              }
          
          }

＆＃13;

当然，通过此邻接检查，您可以自动确保它们属于同一个父级，并且无法打开或关闭父标记，并且仍然在代码中保持相邻。

Answer 3

您可以尝试这样做...添加需要验证锚点的类。 $。通过所有<a>标记。过滤尚未经过验证的未完成项目，以查看href和html（）是否匹配。如果匹配则删除它们。然后从项目中删除验证类，以便在下一个循环中，不包括已验证的项目。

$('a').addClass('verify').each(function () {
    var $this = $(this);
    //you can change the html() to text() is you are only worried about match the innerText
    $('a.verify').not(this).filter(function () {
        return ($(this).html() == $this.html() && $(this).attr('href') == $this.attr('href'))
    }).remove();
    $this.removeClass('verify')
});

如何自动合并不必要的html标签

3 个答案: