CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
user2704613
user2704613

Reputation: 186

how to remove span tag from the string?

I need to remove the span tag from string .Is it posible .?

My input is this

In open <span class="">court</span> at 11:01 a.m.)
          THE <span class="">COURT</span>:  Our interpreter.
(NOTE:  Spanish interpreter Rosa Lopez-Gaston sworn.)
          SPEAKER 2:  Judy Faviell for the State.  
          SPEAKER 1:  Carey Bhalla for Mr. Garcia, who is present in custody, Your Honor.  
          SPEAKER 2:  Judge, we do have a change of plea, which I will tender to the <span class="">Court</span>.  
          THE <span class="">COURT</span>:

Output is this

 In open court at 11:01 a.m.)
              THE COURT:  Our interpreter.
    (NOTE:  Spanish interpreter Rosa Lopez-Gaston sworn.)
              SPEAKER 2:  Judy Faviell for the State.  
              SPEAKER 1:  Carey Bhalla for Mr. Garcia, who is present in custody, Your Honor.  
              SPEAKER 2:  Judge, we do have a change of plea, which I will tender to the <span class="">Court</span>.  
              THE COURT:

Upvotes: 14

Views: 36172

Answers (4)

Andrew Willems
Andrew Willems

Reputation: 12458

Summary

If the "string" you need to convert is already part of the content of an HTML element, then here is a POV (plain old vanilla) JavaScript (i.e. non-jQuery) solution:

element.outerHTML = element.innerHTML;

Examples and Explanation

So, for example, if you wanted to unwrap/remove all spans in your document you could loop through all the relevant elements like the following:

document.querySelectorAll('span').forEach(spanElmt => {
  spanElmt.outerHTML = spanElmt.innerHTML;
};

The following example demonstrates how this works, showing that the element specified is removed/unwrapped, while any elements nested inside remain intact.

const btn     = document.querySelector('button');
const redSpan = document.querySelector('.red'  );
const par     = document.querySelector('p'     );
const div     = document.querySelector('div'   );

const unwrapElmt = elmt => {
  elmt.outerHTML = elmt.innerHTML; // *** the key line
};

const showParagraphHTML = () => {
  div.textContent = 'HTML for the above line: ' + par.innerHTML;
};

showParagraphHTML();

const unwrapRedSpan = () => {
  unwrapElmt(redSpan);
  showParagraphHTML();
};

btn.addEventListener('click', unwrapRedSpan);
.red {
  color: red;
}
.italic {
  font-style: italic;
}
<button>Click here to unwrap/remove red span</button>
<p>Here is <span class="red">some <span class="italic">very</span> red</span> text.</p>
<p><div></div>

Inserting a String into an HTML Element

This solution requires that the text/string to be modified is already part of an HTML document or element. Thus, it won't work on a stand-alone string such as the following:

const myStr = 'some <span><i>very</i> interesting</span> thing';
myStr.outerHTML = myStr.innerHTML; // won't work

This is, ultimately, what the original question was asking. However, the string above can be made part of a temporary intermediate orphan HTML container element, after which this solution becomes useable:

const myStr = 'some <span><i>very</i> interesting</span> thing';
const container = document.createElement('div'); // a temporary orphan div
container.innerHTML = myStr;
const spanToUnwrap = container.querySelector('span');
spanToUnwrap.outerHTML = spanToUnwrap.innerHTML;
const myModifiedStr = container.innerHTML;

This might seem like overkill if, e.g., you only want to remove one or a few simple tags from a single string, as suggested in the question. In such a case, a regex-based replacement would probably suffice such as that proposed in another answer. However, for anything more complicated (e.g. only wanting to remove spans of a specific class, etc.), using a temporary orphan HTML element as an intermediate might be quite useful.

Note that the strategy described in this section is ultimately what a different answer is showing how to do with jQuery. However, if your initial string is already part of an HTML element, and you're not yet needing jQuery, using jQuery might be overkill when this outerHTML/innerHTML swap is really all you need.

Upvotes: 7

Travis Kaufman
Travis Kaufman

Reputation: 2937

This should do it

return $(string).text()

If you're not using jQuery, you can so something like:

var e = document.createElement('div');
e.innerHTML = string;
return e.textContent ? e.textContent : e.innerText;

You can also try using DOMParser although maybe overkill for what you're trying to do

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

var mystring = 'In open <span class="">court</span> at 11:01 a.m.) THE <span class="">COURT</span>:  Our interpreter. (NOTE:  Spanish interpreter Rosa Lopez-Gaston sworn.) SPEAKER 2:  Judy Faviell for the State. SPEAKER 1:  Carey Bhalla for Mr. Garcia, who is present in custody, Your Honor. SPEAKER 2:  Judge, we do have a change of plea, which I will tender to the <span class="">Court</span>.THE <span class="">COURT</span>:';
var after = $('<div />').html(mystring).find('span').contents().unwrap().end().end().html();

Demo: Fiddle

Upvotes: 2

nnnnnn
nnnnnn

Reputation: 150040

For your edited question you can do this:

var str = // your string here

str = str.replace(/<\/?span[^>]*>/g,"");

Demo: http://jsfiddle.net/vXXJ6/

Upvotes: 37

Related Questions