Program Tip

본문 텍스트에서 단어 교체

programtip 2020. 10. 7. 08:07
반응형

본문 텍스트에서 단어 교체


HTML 본문 내에 배치 된 테이블 요소 내의 일반 텍스트를 대체하는 방법이 있습니까?

"hello"를 "hi"로 바꾸시겠습니까?

jQuery 없이 JavaScript 만 사용하십시오 .


HTML의 문자열을 다른 문자열로 바꾸려면 innerHTMLreplace 메서드를 사용하십시오 .

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

이것은 helloHTML 코드의 모든 인스턴스 (예 : 클래스 이름 등)를 포함하여 본문 전체 의 첫 번째 인스턴스를 대체 하므로주의하여 사용하십시오. 더 나은 결과를 얻으려면 다음을 사용하여 코드를 대상으로 지정하여 대체 범위를 제한하십시오. document.getElementById 또는 유사합니다.

대상 문자열의 모든 인스턴스를 바꾸려면 global 플래그가 있는 간단한 정규식을 사용하십시오 .

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');

아래 기능은 저에게 완벽하게 작동합니다.

// Note this *is* JQuery, see below for JS solution instead
function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function () {
    var $this = $(this);
    if (!$this.children().length)
       $this.text($this.text().replace(matcher, newText));
  });
}

다음은 사용 예입니다.

function replaceAllText() {
  replaceText('*', 'hello', 'hi', 'g');
}

$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);

다음과 같이 직접 대체를 사용할 수도 있습니다.

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

그러나 태그, CSS 및 스크립트에도 영향을 미칠 수 있으므로주의하십시오.

편집 : 순수한 JavaScript 솔루션의 경우 대신이 방법을 사용하십시오.

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  var elems = document.querySelectorAll(selector), i;

  for (i = 0; i < elems.length; i++)
    if (!elems[i].childNodes.length)
      elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}

나는 같은 문제가 있었다. innerHTML에서 replace를 사용하여 내 자신의 함수를 작성했지만 앵커 링크 등을 망칠 것입니다.

제대로 작동하도록 라이브러리사용 하여이 작업을 수행했습니다.

라이브러리에는 멋진 API가 있습니다. 스크립트를 포함시킨 후 다음과 같이 호출했습니다.

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);

나는 부작용없이 안전하게 텍스트를 대체하기 위해이 함수를 사용했다.

function replaceInText(element, pattern, replacement) {
    for (let node of element.childNodes) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                replaceInText(node, pattern, replacement);
                break;
            case Node.TEXT_NODE:
                node.textContent = node.textContent.replace(pattern, replacement);
                break;
            case Node.DOCUMENT_NODE:
                replaceInText(node, pattern, replacement);
        }
    }
}

16kB가 findAndReplaceDOMText너무 무거운 경우입니다.


Use the default javascript string replace function

var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;

I was trying to replace a really large string and for some reason regular expressions were throwing some errors/exceptions.

So I found this alternative to regular expressions which also runs pretty fast. At least it was fast enough for me:

var search = "search string";
var replacement = "replacement string";

document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)

src: How to replace all occurrences of a string in JavaScript?


Try to apply the above suggested solution on pretty big document, replacing pretty short strings which might be present in innerHTML or even innerText, and your html design becomes broken at best

Therefore I firstly pickup only text node elements via HTML DOM nodes, like this

function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

textNodes=textNodesUnder(document.body)
for (i in textNodes) { textNodes[i].nodeValue = textNodes[i].nodeValue.replace(/hello/g, 'hi');    

`and followingly I applied the replacement on all of them in cycle


I am new to Javascript and just started learning these skills. Please check if the below method is useful to replace the text.

<script>

    var txt=document.getElementById("demo").innerHTML;
    var pos = txt.replace(/Hello/g, "hi")
    document.getElementById("demo").innerHTML = pos;

</script>

참고URL : https://stackoverflow.com/questions/5558613/replace-words-in-the-body-text

반응형