为什么？

Question

I have a certain HTML string which roughly looks like follows :

<a href="#1">1</a>
<a href="#a">a</a>
<a href="#5">5</a>
<a href="#4">4</a>

I want to write a generalized function that takes an integer as input. If, for example input = 2, the function should return an HTML string that is like this

<a href="#1">1</a>
<a href="#a">a</a>

If input parameters = 3

<a href="#1">1</a>
<a href="#a">a</a>
<a href="#5">5</a>

and so on. Any suggestions to how I can achieve this ?

Answer 1

试试这个：

function getFirst(amount, str) {

    return $(str).slice(0, amount);

}

这样打电话：

getFirst(2, '<a href="#1">1</a>' +
'<a href="#a">a</a>' +
'<a href="#5">5</a>' +
'<a href="#4">4</a>')

将导致：

<a href="#1">1</a><a href="#a">a</a>

演示：https://jsfiddle.net/24h4Lykq/5/

Answer 2

对HTML进行一些简化假设（例如链接中没有嵌入链接和HTML属性中的"</a>"），您可以使用以下代码：

function getFirstNLinks(str, n) {
    var index = 0;
    var target = "</a>";
    for (var i = 0; i < n; i++) {
        index = str.indexOf(target, index);
        if (index < 0) {
            return null;
        } else {
            // skip to end of match
            index += target.length;
        }
    }
    return str.slice(0, index);
}

工作演示：http://jsfiddle.net/jfriend00/5t8e964f/

您还可以使用实际的DOM解析器并处理更多种类的HTML，但这需要解析为DOM元素，提取子集，然后从这些DOM元素重构HTML。

这是一个简单的Javascript DOM解析器实现：

function getFirstNLinks(str, n) {
    var div = document.createElement("div");
    var div2 = document.createElement("div");
    div2.innerHTML = str;
    div.appendChild(div2);
    var links = div.querySelectorAll("div > a");
    // remove any excess links
    for (i = n; i < links.length; i++) {
        links[i].parentNode.removeChild(links[i]);
    }
    return div2.innerHTML;
}

工作演示：http://jsfiddle.net/jfriend00/98qs2p9a/

如果最终结果是您将这些链接放入DOM中，那么进行字符串操作可能不是解决此问题的正确方法。从原始HTML创建DOM元素，然后删除您不想要的多余链接。这让DOM解析器可以为你做所有的HTML解析，你不能转换为DOM，然后转换回字符串，然后再转换回DOM。

Answer 3

    function splitLinks(links, nbLinks){
        var links_a = links.split("</a>").slice(0, nbLinks);
        return links_a.join('</a>') + "</a>";
    }

    var str = '<a href="#1">1</a><a href="#a">a</a><a href="#5">5</a><a href="#4">4</a>';
    console.log(splitLinks(str, 2));

=> <a href="#1">1</a><a href="#a">a</a>

我试着让它变得简单=）

Answer 4

jQuery过度（假设字符串是你的字符串） DOMParser是最好的方法：

var result = [], num = 3,//ADJUST THIS NUMBER TO YOURS NEEDS
    doc = (new DOMParser()).parseFromString('<div>' + string + '</div>', "text/xml");
for (var i = 0; i < doc.firstChild.childElementCount; i += 1) { if (doc.firstChild.childNodes[i].nodeType === 1) { (i<num)&&result.push(doc.firstChild.childNodes[i]); } }

结果存储在results变量

中

jQuery的？

此方法的最佳部分是返回您可以使用和修改的 实际元素 。它也适用于任何元素类型。它还使用纯JavaScript。一个例子是：

$(result[0]).attr('href');

工作正常。

为什么？

这是一个很好的问题。除了拆分字符串之外，如果你要做任何。这是最好的答案。例如，如果标签包含数据，例如href或其他标签。这完全是为了那个。

作为字符串？

根据您在问题中所说的，最准确的答案是：

var stringresult = result.map(function(a){ var temp_parent = document.createElement('div'); temp_parent.appendChild(a); return temp_parent.innerHTML; }).join('\n');//Alternately use ' ' or '' in join

如果你想要一个数组，例如[a href="#1">1</a>, <a href="#a">a</a>, <a href="#5">5</a>]

使用：

var arrayresult = result.map(function(a){ var temp_parent = document.createElement('div'); temp_parent.appendChild(a); return temp_parent.innerHTML; });

Fiddle

Answer 5

您可以使用jQuery $.parseHTML，然后在函数中包含一个参数，以确定您是希望将结果作为HTML字符串还是对象：

[打开控制台以查看摘录中的结果]

＆＃13;

/// setup:

var str = '<a href="#1">1</a>' +
  '<a href="#a">a</a>' +
  '<a href="#5">5</a>' +
  '<a href="#4">4</a>',
  html = $.parseHTML(str);


var stringResult = getHTMLNodes(html, 0, 2, "string");
var objResult = getHTMLNodes(html, 3, 4, "object");

console.log(stringResult);
console.log(objResult);


/// function:
function getHTMLNodes(html, start, end, returnType) {
  
  // get the range of results:
  var sliceHTML = $(html).slice(start, end),
    result = "";

  // if HTML is specified
  if (returnType === "object") {
    return sliceHTML;
  } else if (returnType === "string") {
    sliceHTML.each(function(i) {
      result = result + $(this).prop('outerHTML');
    });
    return result;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Deleting certain html blocks from HTML String - Javascript or Jquery

5 个答案:

jQuery的？

为什么？

作为字符串？

Fiddle