Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:
like image 593
user2704613 Avatar asked Aug 27 '13 11:08

user2704613


People also ask

How do I delete a span?

To delete a text span you will still need to double click into the text element, select the portion you want to remove and delete.

How do I get rid of span in HTML?

Inline text styles are often set by using the span tags. Activating this option will remove all span tags including their styles, classes etc.

How can I hide my span?

To find a basis for the span of a set of vectors, write the vectors as rows of a matrix and then row reduce the matrix. The span of the rows of a matrix is called the row space of the matrix. The dimension of the row space is the rank of the matrix.

Do you need to close a span tag?

The span tag is a paired tag means it has both open(<) and closing (>) tags, and it is mandatory to close the tag. The span tag is used for the grouping of inline elements & this tag does not make any visual change by itself.


2 Answers

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.

like image 155
Andrew Willems Avatar answered Sep 28 '22 05:09

Andrew Willems


For your edited question you can do this:

var str = // your string here

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

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

like image 40
nnnnnn Avatar answered Sep 28 '22 05:09

nnnnnn