本文の単語を置き換える

HTMLの本文内に配置されているテーブル要素内の通常のテキストを置き換える方法はありますか？

「hello」を「hi」に置き換えるのはどうですか？

jQueryなしのJavaScriptのみを使用してください。

HTMLの文字列を別の文字列に置き換えるには、innerHTMLのreplaceメソッドを使用します。

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

これはhello、HTMLコード内のインスタンス（クラス名など）を含む、本文全体の最初のインスタンスを置き換えるため、注意して使用してください。より良い結果を得るには、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内のすべての文字列を置き換える方法は？

デフォルトのJavaScript文字列置換関数を使用する

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

上記の提案されたソリューションをかなり大きなドキュメントに適用して、innerHTMLまたはinnerTextに存在する可能性のあるかなり短い文字列を置き換えてみてください。

したがって、私はまず、このように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');    

`そして、私はサイクルでそれらのすべてに置き換えを適用しました

funky-futureの答えに例を追加したかったので、私はこのエラーを受け取り続けました：

Uncaught TypeError: element.childNodes is not iterable

次のように使用します：

replaceInText(document.body,"search term","replacement");

jQueryセレクターでは機能しませんでした。

私はJavascriptこれらのスキルを初めて使用し、習い始めたばかりです。以下の方法がテキストの置き換えに役立つかどうかを確認してください。

<script>

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

</script>

変更するとdocument.body.innerHTML、ページ上の一部のJSスクリプトが壊れる場合があります。text要素のコンテンツのみを変更するバージョンです。

function replace(element, from, to) {
    if (element.childNodes.length) {
        element.childNodes.forEach(child => replace(child, from, to));
    } else {
        const cont = element.textContent;
        if (cont) element.textContent = cont.replace(from, to);
    }
};

replace(document.body, new RegExp("hello", "g"), "hi");