Question

所以我要像这样解析其中包含HTML内容的字符串（出于示例目的而简化）

var htmlProd = "this is <div> my test </div> string <div> I want to extract this </div>

理想情况下，我希望能够将div中的两个子字符串提取到一个数组中，最终结果为

。

myStrings = ["my test","I want to extract this"]

我尝试了几件事，但是我很沮丧。到目前为止，这就是我所拥有的。我在获取每个子字符串时遇到麻烦，我只找到了获得一个子字符串的解决方案。

var myStrings = htmlProd.match(">(.*)<");

任何帮助将不胜感激。我可以在解决方案中使用JQuery或javascript。

Answer 1

由于您使用的是jQuery，因此可以将字符串视为HTML标记，并按如下所示进行操作。

使用jQuery的建议

var container = $('<div>').html("this is <div> my test </div> string <div> I want to extract this </div>");

var myStrings = container.find('div').map(function() {
  return $(this).text().trim();
}).get();

console.log(myStrings);

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

使用正则表达式的建议

var myStrings = "this is <div> my test </div> string <div> I want to extract this </div>".match(/<div>(.*?)<\/div>/gm);

$.each(myStrings, function(i, v) {
  myStrings[i] = v.replace(new RegExp("<div>", 'g'), "").replace(new RegExp("</div>", 'g'), "");
});

console.log(myStrings);

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

Answer 2

您可以在此处采取其他方法。由于它是您正在查看的HTML字符串，因此可以将其作为临时元素的HTML内容加载，然后使用DOM来获取内容。

var htmlProd = "this is <div> my test </div> string <div> I want to extract this </div>";

// Create a temporary element as a container for the html string
let temp = document.createElement("section");

// Load the string into the container
temp.innerHTML = htmlProd;

// Use the DOM to extract the strings within the <div> elements...

// First, get the div elements into a node list
let divs = temp.querySelectorAll("div");

// Now, iterate the nodes and place the contents into a new array
let results = Array.prototype.slice.call(divs).map(function(div){
  return div.textContent;
});

// Results
console.log(results);

Answer 3

通过将html字符串传递给空元素并遍历该元素来使用jQuery map（）

var htmlProd = "this is <div> my test </div> string <div> I want to extract this</div>"


var txtArr = $('<div>').html(htmlProd)
                      .find('div')
                      .map(function(_,el){return el.textContent.trim()})
                      .get();
console.log(txtArr)

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

Answer 4

使用regex的另一种方法，

const regex = /<div>(.*?)<\/div>/gm;
const str = `this is <div> my test </div> string <div> I want to extract this </div>`;
let m;
let myStrings = [];
while ((m = regex.exec(str)) !== null) {
  // This is necessary to avoid infinite loops with zero-width matches
  if (m.index === regex.lastIndex) {
    regex.lastIndex++;
  }

  // The result can be accessed through the `m`-variable.
  m.forEach((match, groupIndex) => {
    if (groupIndex == 1)
      myStrings.push(match.trim());
  });
}

console.log(myStrings)

正则表达式： https://regex101.com/r/hMIidd/1

在一个大字符串中获取定界符之间的所有子字符串

4 个答案: