文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么HTML标签会出现在我的API数据中？

问为什么HTML标签会出现在我的API数据中？
EN

Stack Overflow用户

提问于 2018-12-29 22:33:44

回答 1查看 558关注 0票数 0

我已经通过JavaScript和XMLHTTPRequest将两个API拉入到WordPress中。数据在网站上的数据中有一些超文本标记语言标记：https://youaretechy.com/jobs-at-the-muse/和https://youaretechy.com/jobs-2/

我对此进行了研究，并尝试将以下代码添加到我的JS中以删除HTML标记：

function strip_html_tags(str)
{
   if ((str===null) || (str===''))
       return false;
  else
   str = str.toString();
  return str.replace(/<[^>]*>/g, '');
}

我试过了：

var noHTML =  OriginalString.replace(/(<([^>]+)>)/ig,"");

我试过了：

str.replace(/<\/?[^>]+>/gi, '')

最后，我尝试了：

  var html = "<p>Some HTML</p>";
      var div = document.createElement("div");
      div.innerHTML = html;
      var text = div.textContent || div.innerText || "";

不幸的是，上面的代码都没有删除标签。我在一个叫做Shortcoder的WordPress插件中使用了HTML和JS。下面是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<img src="https://youaretechy.com/wp-content/uploads/2018/08/type_on_PC-300x200.jpg" alt="" width="300" height="200" class="alignnone size-medium wp-image-87937" />
  <title>API Testing</title>

  <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">

  <style>
* {
  box-sizing: border-box
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Dosis', sans-serif;
  line-height: 1.6;
  color: #696969;
  background: white;
}

#root {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  padding: 1.5rem 2.5rem;
  background-color: #b0bac6;
  margin: 0 0 2rem 0;
  font-size: 1.5rem;
  color: #696969;
}

p {
  padding: 0 2.5rem 2.5rem;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  background: #bobac6;
  box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s linear;
}

.card:hover {
  box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
  transform: translate3D(0, -2px, 0);
}

@media screen and (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
  .card {
    flex: 1 1 calc(33% - 2rem);
  }
}

.card:nth-child(2n) h1 {
  background-color: #b0bac6;
  color: #696969;
}

.card:nth-child(4n) h1 {
  background-color: #b0bac6;
  color: #696969;
}

.card:nth-child(5n) h1 {
  background-color #b0bac6;
  color: #696969;
}


  </style>

</head>

<body>

  <div id="root"></div>


<script>
'use strict';
const app = document.getElementById('root');

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(container);

var request = new XMLHttpRequest();
request.open('GET', 'https://jobs.github.com/positions.json?markdown=true&page=1', true);
request.onload = function () {

   var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(job => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

     function strip_html_tags(str)
       {
         if ((str===null) || (str===''))
       return false;
         else
        str = str.toString();
        return str.replace(/<[^>]*>/g, '');
        }


      const h1 = document.createElement('h1');
      h1.textContent = job.title;

      const p = document.createElement('p');
      job.description = job.description.substring(0, 300);
      p.textContent = `${job.description}...`;

      container.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);


   });

  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);

  }
}

request.send();

</script>

</body>

</html>

提前感谢您的帮助！！

json

wordpress

api

javascript

回答 1

Stack Overflow用户

发布于 2018-12-29 22:50:22

如果创建一个新临时元素并将该html分配给它，则可以提取textContent，这将自动删除所有HTML标记。

const data = '<p>McLean 1 (19050), United States of America, McLean, Virginia<br><br>At Capital One, we\'re building a leading information-based technology company. Still founder-led by Chairman and Chief Executive Officer Richard Fairbank, Capital One is on a mission to help our customers succeed by bringing ingenuity, simplicity, and humanity to banking. We measure our efforts by the success our customers enjoy and the advocacy they exhibit. We are succeeding because they are succeeding. <br><br>Guided by our shared val…ifications: </u></b><br>Bachelor\'s Degree or Military experience<br>At least 2 years of experience in analysis<br><br><b><u>Preferred Qualifications: </u></b><br>Master\'s Degree<br><br>At least 5 years of experience in analysis<br>At least years of experience in financial services<br>At least 1 year of experience in consulting<br>At least 2 years of experience in people management<br><br><b>Capital One will consider sponsoring a new qualified applicant for employment authorization for this position</b></p>';

const temp = document.createElement('p');
temp.innerHTML = data;
document.getElementById('out').textContent = temp.textContent;

<div id="out"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53970452

复制

相似问题

问为什么HTML标签会出现在我的API数据中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么HTML标签会出现在我的API数据中？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么HTML标签会出现在我的API数据中？
EN