替换文本区域的单词

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>hello/b> 替换了它，但我想让它加粗。有解决办法吗？

Answer 1

更新：
作为对您的编辑的回应，您希望看到单词 “hello” 以粗体显示。对此的简短回答是：无法做到。至少不在一个简单的文本区域中。您可能正在寻找更像在线 WYSIWYG 编辑器的东西，或者至少是 RTE（富文本编辑器）。其中有几个，例如like tinyMCE，这是一个不错的所见即所得编辑器。 RTE 和 HTML 编辑器列表can be found here。

首先：正如其他人已经指出的那样：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>');

fiddle

它是如何工作的：

• (?!>)：仅在前面没有 > 字符的情况下匹配其余部分（更具体地说，如果您想使用 (?!<b>)。这称为负前瞻
• \b：单词边界，以确保我们不匹配单词的一部分
• (hello)：匹配并捕获字符串文字，前提是（如上所述）它 not 前面有 > 并且有一个单词边界
• (?!<)：同上，只是现在我们不想找到匹配的</b>，所以你可以用更具体的(?!<\/b>)替换它
• /gi：影响整个模式的修饰符或标志：g 用于全局（意味着此模式将应用于整个字符串，而不仅仅是单个匹配）。 i 告诉正则表达式引擎模式是 case-insensitive，即：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 的介绍留在那里......即使我们只触及了表面，我认为现在很清楚正则表达式的强大程度。花一些时间和精力来了解更多关于这个神奇工具的信息，这是非常值得的。

Answer 2

如果<textarea>，则需要使用.value属性。

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

而且，正如 Barmar 所提到的，replace() 仅替换第一个单词。要替换所有单词，您需要使用简单的正则表达式。请注意，我删除了引号。 /g 表示全局替换。

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

---

但是如果你想真正加粗你的文本，你需要使用内容可编辑的 div，而不是文本区域：

<div id="eC" contenteditable></div>

那么你需要访问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;
}