Question

我有以下originaldata我想从其中的每个对象中删除div标记，并将标记内容作为最终结果，请参阅modifieddata。

使用javascript的最佳方法是什么？过滤和地图？或其他什么。

originaldata = [{
        "name": "john",
        "content": "<div class="ExternalClass06EE5E42165840F48DFA193ACAD4F87A">aa</div>"
    },
    {
        "name": "mary",
        "content": "<div class="ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A">asd</div>"
    }
]

modifieddata = [{
        "name": "john",
        "content": "aa"
    },
    {
      "name": "mary",
      "content": "asd"
    }
]

Answer 1

使用javascript的最佳方法是什么？过滤和地图？或其他什么。

如果你想采用功能性的方法，只需map（复制对象），你就不会过滤。

如果没有，只需forEach修改现有对象：

这是map版本：

var originaldata = [{
  "name": "john",
  "content": "<div class='ExternalClass06EE5E42165840F48DFA193ACAD4F87A'>aa</div>"
},
{
  "name": "mary",
  "content": "<div class='ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A'>asd</div>"
}];
var temp = document.createElement("div");
var modifieddata = originaldata.map(entry => {
  temp.innerHTML = entry.content;
  return {
    name: entry.name,
    content: temp.firstChild.firstChild.nodeValue
  };
});
console.log(modifieddata);

...或使用浏览器供应商正在积极添加的Stage 3 proposal for object property spread（例如Chrome有它），我们可以避免知道其他属性的名称：

// Note: I have the "Use BabelJS / ES2015" checkbox ticked
// so this will work even in browsers that don't
// have property spread yet.
const originaldata = [{
  "name": "john",
  "content": "<div class='ExternalClass06EE5E42165840F48DFA193ACAD4F87A'>aa</div>"
},
{
  "name": "mary",
  "content": "<div class='ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A'>asd</div>"
}];
const temp = document.createElement("div");
const modifieddata = originaldata.map(entry => {
  temp.innerHTML = entry.content;
  return {
    ...entry, // <=== Property spread
    content: temp.firstChild.firstChild.nodeValue
  };
});
console.log(modifieddata);

这是forEach版本：

var originaldata = [{
  "name": "john",
  "content": "<div class='ExternalClass06EE5E42165840F48DFA193ACAD4F87A'>aa</div>"
},
{
  "name": "mary",
  "content": "<div class='ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A'>asd</div>"
}];
var temp = document.createElement("div");
originaldata.forEach(entry => {
  temp.innerHTML = entry.content;
  entry.content = temp.firstChild.firstChild.nodeValue;
});
console.log(originaldata);

你在评论中说过：

如果DIV中还有其他HTML标记，也会将其删除。理想情况下，我想保留DIV中的所有内容，即使它的其他标签。这也可能吗？

在这种情况下，在上述所有情况下，请更改

entry.content = temp.firstChild.firstChild.nodeValue;

到

entry.content = temp.firstChild.innerHTML;

以下是带有此更改的forEach：

var originaldata = [{
  "name": "john",
  "content": "<div class='ExternalClass06EE5E42165840F48DFA193ACAD4F87A'>aa<span>stuff in a span</span><br></div>"
},
{
  "name": "mary",
  "content": "<div class='ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A'>asd</div>"
}];
var temp = document.createElement("div");
originaldata.forEach(entry => {
  temp.innerHTML = entry.content;
  entry.content = temp.firstChild.innerHTML;
});
console.log(originaldata);

Answer 2

首先你必须解决引号问题，你不能在同一个字符串中多次使用双引号：

"<div class="ExternalClass06EE5E42165840F48DFA193ACAD4F87A">aa</div>"
^___________^_____________________________________________^_________^

而是使用单引号：

 "<div class='ExternalClass06EE5E42165840F48DFA193ACAD4F87A '>aa</div>"

然后遍历数组并选择你想要的属性：

for (var i in originaldata) {
   var temp_div = document.createElement('div'); //Create temporary div
   temp_div.innerHTML = originaldata[i].content; //Append the tag in the content to it

   originaldata[i].content = temp_div.textContent; //Get the text using 'textContent'
}

＆＃13;

var originaldata = [{
    "name": "john",
    "content": "<div class='ExternalClass06EE5E42165840F48DFA193ACAD4F87A '>aa</div>"
  },
  {
    "name": "mary",
    "content": "<div class='ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A '>asd</div>"
  }
];

for (var i in originaldata) {
  var temp_div = document.createElement('div');
  temp_div.innerHTML = originaldata[i].content;

  originaldata[i].content = temp_div.textContent;
}

console.log(originaldata);

＆＃13;

Answer 3

使用map和createElement

var output = originaldata.map( function(item){
  var div = document.createElement("div");
  div.innerHTML = item.content;
  return { name : item.name, content : div.textContent }; 
});

＆＃13;

var originaldata = [{
"name": "john",
"content": "<div class=	'ExternalClass06EE5E42165840F48DFA193ACAD4F87A'>aa</div>"
},
{
"name": "mary",
"content": "<div class='ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A'>asd</div>"
}];

var output = originaldata.map( function(item){
  var div = document.createElement("div");
  div.innerHTML = item.content;
  return { name : item.name, content : div.textContent }; 
});

console.log( output );

＆＃13;

Answer 4

我会使用Array.prototype.map和regexp：

const originaldata = [{
  "name": "john",
  "content": '<div class="ExternalClass06EE5E42165840F48DFA193ACAD4F87A">aa</div>'
},
{
  "name": "mary",
  "content": '<div class="ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A">asd</div>'
}];

const regex = /(<([^>]+)>)/ig;

const modifieddata = originaldata.map(item => ({ 
  name: item.name,
  content: item.content.replace(regex, "")
}));

console.log(modifieddata); // [{name: "john", content: "aa"}, {name: "mary", content: "asd"}]

UPD。如果您的内容结构可能比仅仅一个标记包装更复杂，那么您应该考虑使用其他方法（例如this one和that one ）。

Answer 5

您可以创建新的元素，然后将originaldata数组的内容插入到新创建的元素中。

稍后您使用innerHTML检索元素的html，并使用original originaldata.content

覆盖innerHTML

工作演示

var originaldata = [{
    "name": "john",
    "content": "<div class='ExternalClass06EE5E42165840F48DFA193ACAD4F87A '>aa</div>"
  },
  {
    "name": "mary",
    "content": "<div class='ExternalClass3D5F8061F3DE49C4BC55A9CE0ADD6F9A '>asd</div>"
  }
];

for (var i in originaldata) {
  var html = originaldata[i].content;
  var temp = document.createElement('div');
  
  temp.innerHTML = html;
   
  var htmlContent = temp.firstChild.innerHTML;
  
  originaldata[i].content = htmlContent;
}

console.log(originaldata)

Answer 6

这是一个单行（假设你只有div标签内的字母）

originaldata.forEach( x => { x.content = x.content.match(/>(\w+?)</)[1] })

数组是引用类型，因此作为对象。因此，您可以简单地使用forEach函数迭代数组并使用正则表达式模式/>(\w+?)</来匹配div标签内的内容。这将为您提供您想要的。但要小心。它将更改原始数据源，在我们的案例originaldata数组。

数组对象值删除不需要的字符串

6 个答案: