Function to remove <span></span> from string in an json object array in JavaScript

Question

I know there are many similar questions posted, and have tried a couple solutions, but would really appreciate some guidance with my specific issue.

I would like to remove the following HTML markup from my string for each item in my array:

<SPAN CLASS="KEYWORDSEARCHTERM"> </SPAN>

I have an array of json objects (printArray) with a printArray.header that might contain the HTML markup.

The header text is not always the same.

Below are 2 examples of what the printArray.header might look like:

<SPAN CLASS="KEYWORDSEARCHTERM">MOST EMPOWERED</SPAN> COMPANIES 2016

RECORD WINE PRICES AT <SPAN CLASS="KEYWORDSEARCHTERM">NEDBANK</SPAN> AUCTION

I would like the strip the HTML markup, leaving me with the following results:

MOST EMPOWERED COMPANIES 2016

RECORD WINE PRICES AT NEDBANK AUCTION

Here is my function:

var newHeaderString;
var printArrayWithExtract;
var summaryText;

this.setPrintItems = function(printArray) {
  
  angular.forEach(printArray, function(printItem){

    if (printItem.ArticleText === null) {
      summaryText = '';
    }
    else {
      summaryText =  '... ' + printItem.ArticleText.substring(50, 210) + '...';
    }

// Code to replace the HTML markup in printItem.header
// and return newHeaderString

    printArrayWithExtract.push(
      {
        ArticleText: printItem.ArticleText,
        Summary: summaryText,
        Circulation: printItem.Circulation,
        Headline: newHeaderString,
      }
    );

  });

  return printArrayWithExtract;

};

Tarek Salah uddin Mahmud · Accepted Answer · 2016-10-13 07:19:22Z

1

Try this function. It will remove all markup tags...

function strip(html)
{
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Call this function sending the html as a string. For example,

var str = '<SPAN CLASS="KEYWORDSEARCHTERM">MOST EMPOWERED</SPAN> COMPANIES 2016';
var expectedText = strip(str);

Here you find your expected text.

answered Oct 13, 2016 at 7:19

Tarek Salah uddin Mahmud

9448 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:53:26Z

1

It can be done using regular expressions, see below:

var s1 = '<SPAN CLASS="KEYWORDSEARCHTERM">MOST EMPOWERED</SPAN> COMPANIES 2016';
var s2 = 'RECORD WINE PRICES AT <SPAN CLASS="KEYWORDSEARCHTERM">NEDBANK</SPAN> AUCTION';

function removeSpanInText(s) {
  return s.replace(/<\/?SPAN[^>]*>/gi, "");
}

$("#x1").text(removeSpanInText(s1));
$("#x2").text(removeSpanInText(s2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1 ->
<span id="x1"></span>
<br/>2 ->
<span id="x2"></span>

For more info, see e.g. Javascript Regex Replace HTML Tags.
And jQuery is not needed, just used here to show the output.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Oct 13, 2016 at 7:19

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Comments

onmyway · Accepted Answer · 2016-10-13 07:34:32Z

0

I used this little replace function:

 if (printItem.Headline === null) {
            headlineText = '';
        }
        else {
            var str = printItem.Headline;
            var rem1 = str.replace('<SPAN CLASS="KEYWORDSEARCHTERM">', '');
            var rem2 = rem1.replace('</SPAN>', '');
            var newHeaderString = rem2;
        }

answered Oct 13, 2016 at 7:34

onmyway

1,5254 gold badges34 silver badges66 bronze badges

Collectives™ on Stack Overflow

Function to remove <span></span> from string in an json object array in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related