replace() not working when trying to remove HTML from string

Question

I have a fetch() running which gets jobs. I'm pulling job descriptions which has HTML tags in them. For example:

I have (snippet of code, full code below):

var description = data.jobs[i].content;
var description = description.replace(/<(.|\n)*?>/g, '');

This prints:

<p><span style="font-weight: 400;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

It's like the replace function isn't even running?

Code:

fetch('https://boards-api.greenhouse.io/v1/boards/cutover/jobs?content=true', {})

  .then(function (response) {
    return response.json(); // response type (json)
  })

  .then(function (data) {
    appendDataToHTML(data); // function that appends data to HTML
  })

  .catch(function (err) {
    console.log(err);
  });


  function appendDataToHTML(data) {
    var mainContainer = document.getElementById("jobListing");

    // get count of json objs
    var data_count = Object.keys(data.jobs).length;

    console.log(data_count);

    // for each object, create card
    for (var i = 0; i < data_count; i++) {

      var job_title     = data.jobs[i].title;
      var job_location  = data.jobs[i].location.name;
      var job_link      = data.jobs[i].absolute_url;
      var description   = data.jobs[i].content;

      var description = description.replace(/<(.|\n)*?>/g, '');
      var description = description.substring(0,200); 

      var html =
        '<div class="card">'+
          '<div class="card__body">'+
            '<div class="card__title">'+ job_title +'</div>'+
            '<div class="card__subtitle">'+ job_location +'</div>' +
            '<div class="card__copy">'+ description +'</div>'+
          '</div>'+
        '</div>';

      mainContainer.insertAdjacentHTML('beforeend', html);
    }

  }

<div id="jobListing"></div>

What is data? Hard to say without seeing the input. What's the expected output? — CertainPerformance
– CertainPerformance, Commented May 14, 2020 at 12:33
Don't use a naive regex to remove HTML tags. Use an HTML parser. That's what they're for. If you're doing this in the browser, it has one built in. :-) Note that replacing everything in <> will eat part of the content, for instance <p>If a < b but b > c, then...</p> is invalid-but-tolerated-per-spec (yes, really) but will end up as If a c, then.... — T.J. Crowder
– T.J. Crowder, Commented May 14, 2020 at 12:39
For instance, on a browser: const div = document.createElement("div"); div.innerHTML = yourHtml; const text = div.textContent; — T.J. Crowder
– T.J. Crowder, Commented May 14, 2020 at 12:40
@CertainPerformance - Have updated question showing full fetch(). Expected output is to return string with no HTML tags in them — Freddy
– Freddy, Commented May 14, 2020 at 12:48
You are creating three new description variables, when you only want one. Not even sure how this is not throwing an error when you have three variables with the same name. — Michael
– Michael, Commented May 14, 2020 at 13:06

KooiInc · Accepted Answer · 2020-05-15 07:20:49Z

Like @T.J. Crowder commented: don't use regular expressions to strip html. Here is a way to let the browser do the work for you¹. Note: code shortened a bit.

¹ actually, your code does not return any html. It is 'escaped', using < and <. You can also replace those entities with nothing.

fetch('https://boards-api.greenhouse.io/v1/boards/cutover/jobs?content=true', {})
  .then(function (response) {
    return response.json(); // response type (json)
  })
  .then(function (data) {
    appendDataToHTML(data); // function that appends data to HTML
  })
  .catch(function (err) {
    console.log(err);
  });


  function appendDataToHTML(data) {
    const mainContainer = document.getElementById("jobListing");

    // removes html from a string (using the DOM)
    const removeHTML = html => {
      const tmpDiv = document.createElement("div");
      tmpDiv.innerHTML = html;
      return tmpDiv.textContent;
    };
    
    // for each object, create card
    for (let i = 0; i <  Object.keys(data.jobs).length; i += 1) {
      const content = data.jobs[i].content
        .replace(/&gt;/g, ">")
        .replace(/&lt;/g, "<");
      const html = `
         <div class="card">
           <div class="card__body">
             <div class="card__title">${data.jobs[i].title}</div>
             <div class="card__subtitle">${data.jobs[i].location.name}</div>
             <div class="card__copy">${
                removeHTML(content).replace(/\n/g, "<br>").substr(0, 200) + `&hellip;`} 
              </div>
           </div>
         </div>`;

      mainContainer.insertAdjacentHTML('beforeend', html);
    }
  }

<div id="jobListing"></div>

Collectives™ on Stack Overflow

replace() not working when trying to remove HTML from string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related