[jquery] HTML 태그를 제거하지만 innerHtml을 유지하십시오.

간단한 서식을 제거해야하는 간단한 HTML이 있습니다.

A nice house was found in <b>Toronto</b>.

굵게 표시를 제거해야하지만 문장은 그대로 둡니다.

jQuery에서 어떻게 가능합니까?

답변

$('b').contents().unwrap();

이것은 모든 선택 <b>후, 소자를 사용하는.contents() 의 텍스트 콘텐츠를 대상으로 <b>, 다음.unwrap() 상위 제거 <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 솔루션보다 훨씬 빠릅니다.

답변

다음 .replaceWith()과 같이 사용할 수도 있습니다 .

$("b").replaceWith(function() { return $(this).contents(); });

또는 당신이 그것을 알고 있다면 그것은 단지 문자열입니다 :

$("b").replaceWith(function() { return this.innerHTML; });

위의 방법 중 하나 가의 비용보다 훨씬 빠르기 때문에 많은 요소를 풀면 큰 차이가 생길 수 있습니다 .unwrap().

답변

내부 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

jsFiddle 데모

답변

이건 어때요?

$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));

첫 번째 줄은 b태그 의 HTML 내용을 태그 바로 다음 위치로 복사 b한 다음 두 번째 줄은 bDOM 에서 태그를 제거 하고 복사 된 내용 만 남겨 둡니다.

일반적으로 이것을 사용하기 쉽도록 함수로 묶습니다.

function removeElementTags(element) {
   element.insertAdjacentHTML("afterend",element.innerHTML);
   element.parentNode.removeChild(element);
}

모든 코드는 실제로 순수한 Javascript이며 사용되는 유일한 JQuery는 대상으로 지정할 요소 ( b첫 번째 예의 태그) 를 선택하는 것 입니다. 이 함수는 순수한 JS입니다 : D

또한보십시오 :

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

답변

// 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의 솔루션보다 빠른지 모르겠지만 일부는 이해하기가 더 쉽습니다.

답변

가장 간단한 대답은 마음을 불어 넣는 것입니다.

outerHTML 은 Internet Explorer 4 까지 지원됩니다 !

jQuery가 없어도 자바 스크립트로 수행하는 것입니다.

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를 포함한 모든 주요 브라우저에서 작동합니다. 최근 브라우저에서는 노드 목록에서 바로 각각을 호출 할 수도 있습니다.

function unwrap(selector) {
    document.querySelectorAll('b').forEach( (item,i) => {
        item.outerHTML = item.innerText;
    } )
}