HTML 태그를 제거하지만 내부 HTML은 유지합니다.
간단한 서식을 삭제해야 하는 간단한 HTML이 있습니다.
A nice house was found in <b>Toronto</b>.
굵은 글씨는 빼고 문장은 그대로 둬야 합니다.
jQuery에서 이것이 어떻게 가능합니까?
$('b').contents().unwrap();
모두 선택합니다.<b>elements, 를 사용하여 텍스트 내용을 대상으로 합니다.<b>, 그 부모를 제거할 겁니다<b>요소.
최고의 성능을 얻으려면 항상 기본으로 이동해야 합니다.
var b = document.getElementsByTagName('b');
while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}
이것은 여기에 제공되는 어떤 jQuery 솔루션보다 훨씬 더 빠를 것입니다.
다음과 같이 사용할 수도 있습니다.
$("b").replaceWith(function() { return $(this).contents(); });
아니면 그냥 끈인 걸 아신다면요
$("b").replaceWith(function() { return this.innerHTML; });
위의 두 가지 접근 방식 중 하나가 비용보다 상당히 빠르기 때문에 많은 요소의 포장을 뜯는 경우에는 큰 차이를 보일 수 있습니다.
내부 html 요소를 제거하고 텍스트만 반환하는 가장 간단한 방법은 JQuery .text() 기능입니다.
예:
var text = $('<p>A nice house was found in <b>Toronto</b></p>');
alert( text.html() );
//Outputs A nice house was found in <b>Toronto</b>
alert( text.text() );
////Outputs A nice house was found in Toronto
보라, 가장 간단한 답은 마음이 폭발하는 것입니다.
외부 HTML은 Internet Explorer 4까지 지원됩니다!
jQuery가 없어도 javascript로 하는 것입니다.
element.outerHTML = element.innerHTML
jQuery와 함께
var element = $('b')[0];
element.outerHTML = element.innerHTML;
또는 jQuery 없이
var element = document.querySelector('b');
element.outerHTML = element.innerHTML
함수로 원하는 경우:
function unwrap(selector) {
var nodelist = document.querySelectorAll(selector);
Array.prototype.forEach.call(nodelist, function(item,i){
item.outerHTML = item.innerHTML; // or item.innerText if you want to remove all inner html tags
})
}
unwrap('b')
이것은 기존 IE를 포함한 모든 주요 브라우저에서 작동해야 합니다.
수정이 없을 경우AllowedError 또는 DOME exception은 요소에 부모가 없음을 의미합니다.보통 다른 요소의 자식으로 두지 않고 javascript 콘솔에서 새로운 노드를 생성하여 이 답변을 시도할 때 이 답변을 받습니다.하지만 걱정하지 마시고, 문서의 어떤 요소라도 적어도 부모가 한 명은 있다는 것을 기억하시기 바랍니다.<html></html>요소)
참고:
이 속을 다시 바꿉니다.HTML을 사용하면 내부 요소를 참조하는 변수가 있으면 동일한 요소를 가리키지 않습니다.
코딩에서 일부 내부 요소의 참조를 유지해야 하는 경우 요소를 다시 쓰지 않고 예상 위치로 이동하는 jQuery(위쪽 답변)를 사용할 수 있습니다.
이건 어때?
$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));
첫번째 줄은 의 HTML 내용을 복사합니다.b위치에 태그를 지정합니다.b태그, 그리고 두번째 줄은 제거합니다.b복사된 내용만 남기고 DOM에서 태그를 지정합니다.
저는 일반적으로 이 기능을 사용하기 쉽게 하기 위해 사용합니다.
function removeElementTags(element) {
element.insertAdjacentHTML("afterend",element.innerHTML);
element.parentNode.removeChild(element);
}
모든 코드는 실제로 순수한 자바스크립트이며, JQuery가 사용되고 있는 유일한 것은 타겟으로 할 요소를 선택하는 것입니다.b첫 번째 예에서 태그를 지정합니다.:D함수는 JS :D다입니다.
다음 항목도 봅니다.
// For MSIE:
el.removeNode(false);
// Old js, w/o loops, using DocumentFragment:
function replaceWithContents (el) {
if (el.parentElement) {
if (el.childNodes.length) {
var range = document.createRange();
range.selectNodeContents(el);
el.parentNode.replaceChild(range.extractContents(), el);
} else {
el.parentNode.removeChild(el);
}
}
}
// Modern es:
const replaceWithContents = (el) => {
el.replaceWith(...el.childNodes);
};
// or just:
el.replaceWith(...el.childNodes);
// Today (2018) destructuring assignment works a little slower
// Modern es, using DocumentFragment.
// It may be faster than using ...rest
const replaceWithContents = (el) => {
if (el.parentElement) {
if (el.childNodes.length) {
const range = document.createRange();
range.selectNodeContents(el);
el.replaceWith(range.extractContents());
} else {
el.remove();
}
}
};
또 다른 천연 용액(커피 속):
el = document.getElementsByTagName 'b'
docFrag = document.createDocumentFragment()
docFrag.appendChild el.firstChild while el.childNodes.length
el.parentNode.replaceChild docFrag, el
user113716의 솔루션보다 빠른지는 모르겠지만, 어떤 이들에게는 더 이해하기 쉬울 수도 있습니다.
언급URL : https://stackoverflow.com/questions/4232961/remove-a-html-tag-but-keep-the-innerhtml
'bestsource' 카테고리의 다른 글
| 선택한 오라클 업데이트 쿼리 (0) | 2023.10.26 |
|---|---|
| WooCommerce | Variable Product | 값당 Attribute X(out Y)에 동일한 이미지 할당 (0) | 2023.10.21 |
| ES6 맵 객체를 정렬할 수 있습니까? (0) | 2023.10.21 |
| web.config가 원하는 길이의 요청을 허용하도록 구성하는 방법 (0) | 2023.10.21 |
| SQL 대신 XML을 언제 사용합니까? (0) | 2023.10.21 |