I have made a javascript function to replace some words with other words in a text area, but it doesn't work. I have made this:
function wordCheck() {
var text = document.getElementById("eC").value;
var newText = text.replace(/hello/g, '<b>hello</b>');
document.getElementById("eC").innerText = newText;
}
When I alert the variable newText, the console says that the variable doesn't exist.
Can anyone help me?
Edit:
Now it replace the words, but it replaces it with <b>hello</b>, but I want to have it bold. Is there a solution?
Update:
In response to your edit, about your wanting to see the word "hello" show up in bold. The short answer to that is: it can't be done. Not in a simple textarea, at least. You're probably looking for something more like an online WYSIWYG editor, or at least a RTE (Richt Text Editor). There are a couple of them out there, like tinyMCE, for example, which is a decent WYSIWYG editor. A list of RTE's and HTML editors can be found here.
First off: As others have already pointed out: a textarea element's contents is available through its
value
property, not theinnerText
. You get the contents alright, but you're trying to update it through the wrong property: usevalue
in both cases.If you want to replace all occurrences of a string/word/substring, you'll have to resort to using a regular expression, using the
g
modifier. I'd also recommend making the matching case-insensitive, to replace "hello", "Hello" and "HELLO" all the same:As you can see: I captured the match, and used it in the replacement string, to preserve the caps the user might have used.
But wait, there's more:
What if, for some reason, the input already contains
<b>Hello</b>
, or contains a word containing the string "hello" like "The company is called hellonearth?" Enter conditional matches (aka lookaround assertions) and word boundaries:fiddle
How it works:
(?!>)
: Only match the rest if it isn't preceded by a>
char (be more specific, if you want to and use(?!<b>)
. This is called a negative look-ahead\b
: a word boundary, to make sure we're not matching part of a word(hello)
: match and capture the string literal, provided (as explained above) it is not preceded by a>
and there is a word boundary(?!<)
: same as above, only now we don't want to find a matching</b>
, so you can replace this with the more specific(?!<\/b>)
/gi
: modifiers, or flags, that affect the entire pattern:g
for global (meaning this pattern will be applied to the entire string, not just a single match). Thei
tells the regex engine the pattern is case-i
nsensitive, ie:h
matches both the upper and lowercase character.The replacement string
<b>$1</b>
: when the replacement string contains$n
substrings, where n is a number, they are treated as backreferences. A regex can group matches into various parts, each group has a number, starting with 1, depending on how many groups you have. We're only grouping one part of the pattern, but suppose we wrote:The output would be
"foobar <b>hel-lo</b> foobar"
, because we've split the match up into 2 parts, and added a dash in the replacement string.I think I'll leave the introduction to
RegExp
at that... even though we've only scratched the surface, I think it's quite clear now just how powerful regex's can be. Put some time and effort into learning more about this fantastic tool, it is well worth it.If
<textarea>
, then you need to use.value
property.And, as mentioned Barmar,
replace()
replaces only first word. To replace all word, you need to use simple regex. Note that I removed quotes./g
means global replace.But if you want to really bold your text, you need to use content editable div, not text area:
So then you need to access
innerHTML
: