Question

我已经通过JavaScript和XMLHTTPRequest将两个API引入了WordPress。该数据在网站上的数据中包含一些HTML标签：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，CSS和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>

提前感谢您的帮助！

Answer 1

如果创建一个新的临时元素并为其分配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>

为什么HTML标记显示在我的API数据中？

1 个答案: