[javascript] 본문 텍스트에서 단어 교체

Program / 글쓴이

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

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

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

답변

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

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

답변

부작용없이 텍스트를 안전하게 대체하기 위해이 기능을 사용했습니다 (지금까지).

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너무 무거운 경우입니다.

답변

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

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

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

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

답변

정말 큰 문자열을 바꾸려고했는데 어떤 이유로 정규 표현식이 오류 / 예외를 던졌습니다.

그래서 꽤 빠르게 실행되는 정규식에 대한 대안을 찾았습니다. 적어도 나에게는 충분히 빠르다.

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

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

src : JavaScript에서 모든 문자열을 대체하는 방법은 무엇입니까?

답변

기본 자바 스크립트 문자열 바꾸기 기능 사용

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

답변

위의 제안 된 솔루션을 매우 큰 문서에 적용하여 innerHTML 또는 innerText에있을 수있는 매우 짧은 문자열을 대체하면 html 디자인이 기껏해야 손상됩니다.

따라서 먼저 HTML DOM 노드를 통해 텍스트 노드 요소 만 선택합니다.

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

`그리고 다음으로 나는 주기적으로 그들 모두에 교체를 적용했습니다