fiddle

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时，控制台说变量不存在任何人都可以帮助我吗？

编辑：
现在它替换了单词，但它用＆lt; b＆gt; hello＆lt; / b＆gt;替换它，但我想让它变粗。有解决方案吗？

Answer 1

更新
为了回应您的编辑，您希望看到＆＃34; hello＆＃34; 这个词以粗体显示。对此的简短回答是：它无法完成。至少在简单的textarea中。您可能正在寻找更像在线WYSIWYG编辑器或至少RTE（Richt文本编辑器）的东西。其中有几个，例如like tinyMCE，这是一个体面的WYSIWYG编辑器。 RTE和HTML编辑器列表can be found here。

首先：正如其他人已经指出的那样：textarea元素的内容可通过其value属性获得，而不是innerText。您可以获得内容，但是您尝试通过错误的属性更新内容：在这两种情况下都使用value。

如果要替换所有出现的字符串/ word / substring，则必须使用g修饰符来使用正则表达式。我还建议使匹配不区分大小写，以替换＆＃34; hello＆＃34; ，＆＃34; Hello＆＃34; 和＆＃34; HELLO＆＃34; 都是一样的：

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

如您所见：我捕获了匹配项，并在替换字符串中使用它，以保留用户可能使用过的大写字母。

但是等等，还有更多：

如果由于某种原因，输入已经包含Hello，或者包含一个包含字符串＆＃34; hello＆＃34; 的单词，如＆＃34;该公司被称为hellonearth？＆＃34; 输入条件匹配（又称环绕声断言）和字边界：

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

fiddle

工作原理：

(?!>)：只有在没有>字符的情况下才能与其他字符匹配（更具体地说，如果您想要并使用(?!)。这称为否定前瞻
\b：单词边界，以确保我们不匹配单词的一部分
(hello)：匹配并捕获字符串文字，提供（如上所述） not 前面有>并且有一个单词边界
(?!<)：与上述相同，现在我们不想找到匹配的，因此您可以将其替换为更具体的(?!<\/b>)
/gi：影响整个模式的修饰符或标志：g表示全局（意味着此模式将应用于整个字符串，而不仅仅是单个匹配）。 i告诉正则表达式引擎模式是大小写的 - i nsensitive，即：h匹配大写和小写字符。

替换字符串$1：当替换字符串包含$n个子字符串时，其中n是数字，它们被视为反向引用。正则表达式可以将匹配分组到各个部分，每个组都有一个数字，从1开始，具体取决于您拥有的组数。我们只对模式的一部分进行分组，但假设我们写道：

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

输出为"foobar hel-lo 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;
}

替换文本区域的单词

2 个答案:

fiddle