12

我认为这会相当简单，但我认为关键字太笼统了，所以我不断得到类似this和this的查询结果。

基本上，我有以下 HTML：

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur</span>
    <span class="highlighted">adipiscing</span>
    elit. Sed massa.
<div>

我想将相邻的跨度标签合并到一个跨度标签中，这意味着找到它们之间只有空格的跨度（这可能包括空格、制表符和换行符）。

我正在寻找的结果是这样的：

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur adipiscing</span>
    elit. Sed massa.
<div>

我检查了这个nextUntil函数，但它似乎只返回标签，而不是文本。结果，例如，

$("span.highlighted").nextUntil("span.highlighted").andSelf().text();

是

ipsumconsecteturadipiscing

而不是

ipsum dolor sit amet, consecteturadipiscing

给定两个标签，我怎样才能找到它们之间的文本？

4

6 回答 6

5

下拉到 DOM 可让您在检查同级时查看文本节点内容。

就像是：

function combineSpans(span, nextspan)
{
  var follower = span.nextSibling;
  var concat = true;

   while (follower != nextspan)
   {
     if (follower.nodeName != '#text')
     {
       concat = false;
       break;
     }

     var len = follower.data.trim().length;
     if (len > 0)
     {
       concat = false;
       break;
     }

     follower = follower.nextSibling;
   }

  if (concat)
  {
    $(span).text($(span).text() + " " + $(follower).text());
    $(follower).remove();
  }
}

在此 CodePen 中将其与您的 HTML 一起使用。

于 2013-07-15T19:39:57.517 回答
1

我知道您已经接受了一个解决方案，但我想接受挑战，提供一个可以合并到您的工具集中的纯 JavaScript 解决方案。这是我想出的，并希望得到任何帮助以使其变得更好。

http://jsfiddle.net/ryanwheale/JhZPK/

function joinNeighborsByClassName( className ) {
    var items = document.getElementsByClassName(className),
        next = null,
        remove = [],
        append = '',
        i = 0;

    while( i < items.length && (next = items[i++]) ) {
        while( (next = next.nextSibling) && next !== null ) {
            if((next.nodeType === 3  && /^\s+$/.test(next.nodeValue)) ||     
               (new RegExp("(?:^|\s)" + className + "(?!\S)", "g")).test(next.className) ) {
                append += (next.innerHTML || next.nodeValue);

                if(next.nodeType !== 3) {
                    remove.push(next);
                }
            } else {
                break;
            }
        }

        if(append) items[i-1].innerHTML += append;
        for(var n = 0; n < remove.length; n++) {
            remove[n].parentNode.removeChild(remove[n]);
        }

        remove = [];
        append = '';
    }
}

joinNeighborsByClassName('highlighted');
于 2013-07-16T21:48:46.460 回答
1

嗯，你可以试试这个...

至少在使用2 spans像您的示例一样合并它们时（当存在“空”元素时）它可以完美运行。否则，您将需要考虑一下以处理span持续时间。

（要检查我在说什么，只需看看评论最后一行：nextElem.remove()并检查新的divhtml）。

现场演示：http: //jsfiddle.net/oscarj24/t45MR/

HTML：

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur</span>
    <span class="highlighted">adipiscing</span>
    elit. Sed massa.
</div>

jQuery：

$(document).ready(function () {

    var elem = $('#test');

    elem.contents().filter(function(index) {
        //Get index of an empty element
        if($.trim($(this).text()) === '') 
            //Merge the previous index span with the next index span texts
            mergeSpan(index);
    });

    //Print new inner html
    alert(elem.html());
});

function mergeSpan(index){

    //Get all 'div' elements
    var elems = $('#test').contents();

    //Get previous and next element according to index
    var prevElem = elems.eq(index - 1);
    var nextElem = elems.eq(index + 1);

    //Concat both texts
    var concatText = prevElem.text() + ' ' + nextElem.text();

    //Set the new text in the first span
    prevElem.text(concatText);
    //Remove other span that lasts
    nextElem.remove();
};

结果：

<div id="test">
    Lorem
    <span class="highlighted">ipsum</span>
    dolor sit amet,
    <span class="highlighted">consectetur adipiscing</span>
    elit. Sed massa.
<div>
于 2013-07-15T21:51:04.467 回答
0

对于您的最后一个问题“给定两个标签，我如何找到它们之间的文本？”

好吧，我有这个解决方案给你。

var divData = $("#test").html(); // Getting html code inside div

现在，使用 preg_match() 您可以获得两个单词之间的文本，在您的情况下是跨度之间的文本，如下所示：

preg_match('/'.preg_quote($word1).'(.*?)'.preg_quote($word2).'/is', $html, $matches);

$word1 = '<span class="highlighted">';
$word2 = '<';
$html = $_POST['divData']; // Via post/get you will have to send the html code gotten in "var divData"

并且对于每个匹配项（带有 for 循环）在变量中连接 em，在它们之间添加空格。然后回显您的结果并在您的回调函数中将其添加到您的 div

此链接可以帮助您如何在 jquery jquery post中进行 POST 调用

于 2013-07-15T19:42:53.213 回答
0

正如标题所要求的，这是一种在跨度之间获取文本节点的可能方法：

var textNodes=$('#test').contents().filter(function(){
    return this.nodeType == 3; // text node
});

也可以通过将每个节点与前一个节点进行比较来手动检查它们之间没有空文本节点的连续跨度。像这样的东西可以解决问题：

function combineSpansIn(selector, spanClass) {
    // initialize precedent values
    var prec=null;
    var precNodeType;

    $(selector).contents().each(function(){
        if ($.trim( $(this).text() ) !== "") { // empty nodes will be useless here
            var nodeType = this.nodeType;

            // check if still a combinable span
            if (nodeType == 1 && this.className==spanClass && nodeType == precNodeType) {
                // append current node to precedent one
                $(prec).append(" "+ $(this).text() );

                // remove current node
                $(this).remove();
            } else {
                // update precedent values
                prec=this;
                precNodeType = nodeType;
            }
        }
    });
}

combineSpansIn('#test', 'highlighted');

请看一下这个FIDDLE。

于 2013-07-15T19:50:19.850 回答
0

呵呵。. . 看起来 Oscar Jara 和我在使用 JQuery.contents()方法时提出了类似的想法，但最终得到了一些截然不同的实现：

$(document).ready(function () {
    $("#testDiv").contents().each(function() {
        var prevNode = this.previousSibling;
        var fillerText = "";
        while ((prevNode) && ($.trim($(prevNode).text()) === "")) {
            fillerText += prevNode.nodeValue;
            prevNode = prevNode.previousSibling;
        }

        if ((prevNode) && (this.nodeType === 1) && (prevNode.nodeType === 1)) {
            $(prevNode).text($(prevNode).text() + fillerText + $(this).text());
            $(this).remove();
        }
    });
});

我根据您的原始代码测试了几组不同的 HTML 数据（三个背靠背的跨度、中间有空格和没有空格的跨度等），它似乎可以工作。. . 关键是跳过<span>标签之间的任何“仅空白”文本节点，同时保留它们可能包含的任何所需间距。

于 2013-07-15T22:44:26.040 回答