替換文字區域中的單詞

Question

我已經做了一個javascript函數，可以在文本區域中用其他單詞替換某些單詞，但是它不起作用。 我做了這個：

function wordCheck() {
    var text = document.getElementById("eC").value;
    var newText = text.replace(/hello/g, '<b>hello</b>');
    document.getElementById("eC").innerText = newText;
}

當我提醒變量newText時，控制台會說該變量不存在。
誰能幫我？

編輯：
現在，它將替換單詞，但將其替換為< B>你好< / b>，但我想將其加粗。 有解決方案嗎？

Answer 1

更新：
響應您的編輯，關於您希望看到“ hello”一詞的信息以粗體顯示。 簡短的答案是：這不可能完成。 至少不是在簡單的文本區域中。 您可能正在尋找更像在線WYSIWYG編輯器，或至少是RTE（Richt文本編輯器）的工具。 其中有幾個， 例如tinyMCE ，它是一個不錯的所見即所得的編輯器。 可以在此處找到 RTE和HTML編輯器的列表。

首先，正如其他人已經指出的那樣：textarea元素的內容可通過其value屬性獲得，而不是innerText 。 您可以正確使用內容，但是您嘗試通過錯誤的屬性對其進行更新：在兩種情況下都使用value 。

如果要替換所有出現的字符串/單詞/子字符串，則必須使用g修飾符使用正則表達式。 我還建議使匹配的大小寫不敏感，以相同的方式替換“ hello” ， “ Hello”和“ HELLO” ：

var txtArea = document.querySelector('#eC');
txtArea.value = txtArea.value.replace(/(hello)/gi, '<b>$1</b>');

如您所見：我捕獲了匹配項，並將其用於替換字符串中，以保留用戶可能使用的大寫字母。

但是，等等，還有更多：

如果由於某種原因輸入的內容已經包含<b>Hello</b> ，或者包含一個包含字符串“ hello”的單詞，例如“該公司稱為hellonearth”，該怎么辦？ 輸入條件匹配項（又稱環視斷言）和單詞邊界：

txtArea.value = txtArea.value.replace(x.value.replace(/(?!>)\b(hello)\b(?!<)/gi, '<b>$1</b>');

小提琴

這個怎么運作：

• (?!>) ：僅在不以>字符開頭的情況下匹配其余字符（更具體地講，如果要使用(?!<b>) 。這稱為否定超前
• \\b ：單詞邊界，以確保我們不匹配單詞的一部分
• (hello) ：匹配並捕獲字符串文字，前提是（如上所述）（ 如果前面沒有 >且存在單詞邊界）
• (?!<) ：與上面相同，只是現在我們不想找到匹配的</b> ，因此您可以將其替換為更具體的(?!<\\/b>)
• /gi ：影響整個模式的修飾符或標志： g表示全局（表示此模式將應用於整個字符串，而不僅僅是單個匹配項）。 在i告訴正則表達式引擎的圖案是區分i nsensitive，即： h上部和小寫字符匹配。

替換字符串<b>$1</b> ：當替換字符串包含$n子字符串（其中n為數字）時，它們被視為反向引用 。 正則表達式可以將匹配項分為多個部分，每個組都有一個數字（從1開始），具體取決於您有多少個組。 我們僅將模式的一部分分組，但是假設我們寫了：

'foobar hello foobar'.replace(/(hel)(lo)/g, '<b>$1-$2</b>');

輸出將為"foobar <b>hel-lo</b> foobar" ，因為我們已將匹配分為兩部分，並在替換字符串中添加了破折號。
我想我將在這里保留RegExp的介紹……即使我們只是從頭開始，但我想現在很清楚regex的強大功能。 花一些時間和精力來更多地了解這個出色的工具，這是值得的。

Answer 2

如果<textarea> ，則需要使用.value屬性。

document.getElementById("eC").value = newText;

並且，如Barmar所述， replace()僅替換第一個單詞。 要替換所有單詞，您需要使用簡單的正則表達式。 請注意，我刪除了引號。 /g表示全局替換。

var newText = text.replace(/hello/g, '<b>hello</b>');

---

但是，如果您要真正加粗文本，則需要使用內容可編輯的div，而不是文本區域：

function wordCheck() {
    var text = document.getElementById("eC").innerHTML;
    var newText = text.replace(/hello/g, '<b>hello</b>');
    newText = newText.replace(/&lt;b&gt;&lt;b&gt;/g,"&lt;b&gt;");//These two lines are there to prevent <b><b>hello</b></b>
    newText = newText.replace(/&lt;\/b&gt;&lt;\/b&gt;/g,"&lt;/b&gt;");
    document.getElementById("eC").innerHTML = newText;
}

因此，您需要訪問innerHTML ：

 function wordCheck() { var text = document.getElementById("eC").innerHTML; var newText = text.replace(/hello/g, '<b>hello</b>'); newText = newText.replace(/&lt;b&gt;&lt;b&gt;/g,"&lt;b&gt;");//These two lines are there to prevent <b><b>hello</b></b> newText = newText.replace(/&lt;\\/b&gt;&lt;\\/b&gt;/g,"&lt;/b&gt;"); document.getElementById("eC").innerHTML = newText; }