如何从字符串中删除跨度标签？

Posted 2023-05-09

【中文标题】如何从字符串中删除跨度标签？

【英文标题】：how to remove span tag from the string?

【发布时间】：2013-08-30 03:23:31

【问题描述】：

我需要从字符串中删除跨度标签。可以吗？

我的意见是这样的

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>:

输出是这样的

 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:

【问题讨论】：

***.com/questions/3331449/…

对不起，我编辑了我的输出

【参考方案1】：

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

var str = // your string here

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

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

【讨论】：

我会避免使用正则表达式来解析 html

@TravisKaufman - 对于一般的 HTML 解析，是的，当然要避免正则表达式。对于这个问题的具体输入和期望输出，它是可靠的。但如果您更喜欢使用其他方法，请将其添加为答案。

【参考方案2】：

总结

如果您需要转换的“字符串”已经是 HTML 元素内容的一部分，那么这里有一个 POV（plain old vanilla）javascript（即非 jQuery）解决方案：

element.outerHTML = element.innerHTML;

示例和说明

因此，例如，如果您想解开/删除文档中的所有跨度，您可以遍历所有相关元素，如下所示：

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

以下示例演示了它是如何工作的，显示指定的元素被移除/展开，而嵌套在其中的任何元素保持不变。

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>

将字符串插入 HTML 元素

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

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

这最终是最初的问题要问的。但是，上面的字符串可以成为临时中间孤立 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;

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

请注意，本节中描述的策略最终是 a different answer 展示如何使用 jQuery。但是，如果您的初始字符串已经是 HTML 元素的一部分，并且您还不需要 jQuery，那么当您只需要 outerHTML/innerHTML 交换时，使用 jQuery 可能会过大。

【讨论】：

你有一个错字。是querySelectorAll，不是querySelector

你是对的。现在已修复。谢谢。

【参考方案3】：

试试

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();

演示：Fiddle

【讨论】：

+1 表示非正则表达式版本。对于.end().end().pleasejustendalready()。

【参考方案4】：

应该这样做

return $(string).text()

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

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

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

【讨论】：

你确定那个 jQuery 版本有效吗？我认为您需要做更多类似$("<div>"+string+"</div>").text() 或$("<div/>").html(string).text()