CODEWITHSUNDEEP
javascripthtml
neo33
neo33

Reputation: 1879

How to proced to replace specif words in a textarea?

I have a texarea that looks as follows:

<textarea cols="150" rows="15" id="texto">
"RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
"RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX8.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
</textarea>

I would like to search for a list of specific words that is called: colorWords, in order to replace every word of that list to the following string:

"<p><font color=\"red\">TEXT</font></p>"

I tried:

for (i = 0; i < colorWords.length; i++) { 
    word=colorWords[i];
    //console.log(word)
    text.replace(/word/g, "<p><font color=\"red\">TEXT</font></p>");
}

but when I print the result:

console.log(text)

I get the same textarea without any change, I would like to appreciate support with this task my complete code looks as follows:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><script src="./code33_files/lodash.js"></script> 
</head><body>
<p id="demo"></p>
<textarea cols="150" rows="15" id="texto">
"RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
"RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX8.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
</textarea>
<script>
var text = document.getElementById("texto").value;
var splitWords = text.split(/[["\|~]/);
var cleanArray  = _.remove(splitWords, function (word) {return word !== '' && word !== ' ' && word !== '\n'});
var dict = cleanArray.reduce(function(p,c) {
    if (p[c] === undefined) {
        p[c] = 1;
    } else {
        p[c]++;
    }
    return p;
},{});
var filtered = Object.keys(dict).reduce(function (filtered, key) {
    if (dict[key] > 1) filtered[key] = dict[key];
    return filtered;
}, {});
var colorWords = Object.keys(filtered)
console.log(colorWords)
tagText=[];
for (i = 0; i < colorWords.length; i++) { 
    word=colorWords[i];
    //console.log(word)
    text.replace(/word/g, "<p><font color=\"red\">TEXT</font></p>");
}
console.log(text)
</script>
</body></html>

Upvotes: 0

Views: 57

Answers (2)

jcubic
jcubic

Reputation: 66488

Replace don't replace in place but return new string, you need to assign it to a variable.

text = text.replace(/word/g, "<p><font color=\"red\">TEXT</font></p>");

also if you want to match text in a variable you need to use RegExp constructor:

text = text.replace(new RegExp(word, 'g'), "<p><font color=\"red\">TEXT</font></p>");

if the word contain special regex characters you will need to escape it using this code:

word = word.replace(/([-\\\^$\[\]()+{}?*.|])/g, '\\$1');

Upvotes: 1

epascarello
epascarello

Reputation: 207501

text.replace(/word/g..

is looking for "word", not the variable word. If you want to build a dynamic regular expression use new RegExp(). Also HTML markup does not work in a textarea so you need to output it to another element type.

var str = document.getElementById("texto").value;
var colors = ["RBD","SAMB"];
colors.forEach( function (col) {
    var x = new RegExp("(" + col + ")","g");
    str = str.replace(x, '<span style="color:red">$1</span>');
});
document.getElementById("out1").innerHTML = str;
<textarea cols="150" rows="15" id="texto">
"RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
"RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX8.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
</textarea>
<div id="out1"></div>

or you can just do it without a loop

var str = document.getElementById("texto").value;
var colors = ["RBD","SAMB"];
var x = new RegExp("(" + colors.join("|") + ")","g");
str = str.replace(x, '<span style="color:red">$1</span>');
document.getElementById("out1").innerHTML = str;
<textarea cols="150" rows="15" id="texto">
"RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
"RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX8.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
</textarea>
<div id="out1"></div>

Upvotes: 1

Related Questions