jQuery 如何从字符串中删除span标签？

how to remove span tag from the string?

提问by user2704613

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

我需要从字符串中删除 span 标签。它可能吗。？

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:

回答by nnnnnn

For your edited question you can do this:

对于您编辑的问题，您可以这样做：

var str = // your string here

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

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

演示：http: //jsfiddle.net/vXXJ6/

回答by Andrew Willems

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:

如果您需要转换的“字符串”已经是 HTML 元素内容的一部分，那么这里是一个 POV（普通旧香草）JavaScript（即非 jQuery）解决方案：

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.querySelector('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

将字符串插入到 HTML 元素中

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:

此解决方案要求要修改的文本/字符串已经是 HTML 文档或元素的一部分。因此，它不适用于诸如以下的独立字符串：

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:

最终，这就是最初的问题所要问的。但是，上面的字符串可以成为临时中间孤立 HTML 容器元素的一部分，之后此解决方案变得可用：

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.

如果，例如，您只想从单个字符串中删除一个或几个简单的标签，这可能看起来有点矫枉过正，如问题中所建议的那样。在这种情况下，基于正则表达式的替换可能就足够了，如另一个答案中提出的那样。然而，对于更复杂的事情（例如，只想删除特定类的跨度等），使用临时孤立的 HTML 元素作为中间件可能非常有用。

Note that the strategy described in this section is ultimately what a different answeris 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/innerHTMLswap is really all you need.

请注意，本节中描述的策略最终是一个不同的答案，展示了如何使用 jQuery。但是，如果您的初始字符串已经是 HTML 元素的一部分，并且您还不需要 jQuery，那么当您真正需要此outerHTML/innerHTML交换时，使用 jQuery 可能会有些过分。

回答by Arun P Johny

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

演示：小提琴

回答by Travis Kaufman

This should do it

这应该做

return $(string).text()

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

如果你不使用 jQuery，你可以这样：

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

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

您也可以尝试使用DOMParser尽管对于您尝试做的事情可能有点矫枉过正