I have some script which makes replacements. It works fine, but because of replaced values standing close to each other i’ve got more than one
between values.
It looks like:
<br />
Value
<br />
Value
<br />
<br />
Value
<br />
Value
<br />
<br />
Value
<br />
<br />
<br />
My task is to get only one <br> between values:
<br />
Value
<br />
Value
<br />
Value
Because of not so many variations in my list I know one decision for all available variants but it is bad hardcode something like:
var mystring=`<br />
<br />`
for (i=0; i<mystring.length; i++){
var regex = new RegExp(mystring[i],"g");
mystring = mystring.replace(regex, "");
}
Is there any elegant way to solve my case? Thinking of regexp but it’s too hard for me to write it. Or may be there is another way?
Full example:
function textareadValue() {
var mystring =``;
mystring = document.getElementById("myTextArea").value;
var find1 = ["DEER", "ELK", "PANDA", "THUNDERBIRD", "Text for DELETE 1", "Text for DELETE 3", "Text for DELETE 4", "Text for DELETE 5", "Text for DELETE 6", "Text for DELETE 7", "Text for DELETE 8", "Text for DELETE 9", "Text for DELETE 10"];
var find2 = /(d{4})/g;
var find3 =["REPLACE THIS TEXT 1","REPLACE THIS TEXT 2", "REPLACE THIS TEXT 3", "REPLACE THIS TEXT 4", "REPLACE THIS TEXT 5"]
var replace="<br />";
var replace3 = ["TEXT REPLACED 1","TEXT REPLACED 2", "TEXT REPLACED 3","TEXT REPLACED 4","TEXT REPLACED 5"];
for (i=0; i<find1.length; i++){
var regex = new RegExp(find1[i],"g");
mystring = mystring.replace(regex, "");
}
for (i=0; i<mystring.length; i++){
mystring = mystring.replace(find3[i], replace3[i]);
}
mystring = mystring.replace(find2, replace);
document.getElementById('result').innerHTML=mystring;
console.log(mystring);
} <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clear text</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<body>
<div class="columns mt-0 pt-0 mb-5 is-mobile">
<div class="column"></div>
<div class="column is-three-quarters mb3">
<div class="field">
<label class="label">Enter text here:</label>
<div class="control">
<textarea class="textarea" placeholder="Text" id="myTextArea">Text Value
DEER
2024
Text Value
DEER
2024
Text Value
ELK
2024
REPLACE THIS TEXT 1
ELK
2024
Text Value
ELK
2024
Text Value
ELK
2024
Text for DELETE 1
2024
Text for DELETE 2
2024
Text for DELETE 4
THUNDERBIRD
2024
Text Value
ELK
2024
Text Value
ELK
2024
Text for DELETE 5
DEER
2024
Text for DELETE 6
ELK
2024
Text Value
ELK
2024
REPLACE THIS TEXT 2
ELK
2024
Text Value
ELK
2024
REPLACE THIS TEXT 3
ELK
2024
Text Value
ELK
2024
Text Value
ELK
2024
REPLACE THIS TEXT 4
ELK
2024
Text Value
ELK
2024
Text Value
ELK
2024
Text Value
ELK
2024
Text Value
ELK
2024
Text Value
ELK
2024
Text Value
THUNDERBIRD
2024
Text Value
ELK
2024
Text Value
DEER
Text Value
Text Value
ELK
2024
Text Value
DEER
2024
Text Value
DEER
2024
Text Value
DEER
2024
Text Value
DEER
2024
Text Value
DEER
2024
Text Value
ELK
2024
Text Value
PANDA
2024
Text Value
DEER
2024
Text Value
PANDA
2024
Text for DELETE 7
PANDA
2024
Text Value
THUNDERBIRD
2024
Text Value
DEER
2024
PANDA
2024
Text Value
THUNDERBIRD
2024
Text for DELETE 9
PANDA
2024
Text for DELETE 10
2024</textarea><Br>
<button class="button is-link" onclick="textareadValue();">Clean</button>
</div>
</div><br clear="all">
<div id="result" class="pl-10"></div>
</div>
<div class="column"></div>
</div>
</body>
2
Answers
Seems to me that i find an exit not an optimal as it seems but just working. I've changed an order of replacement a bit and added one more regexp to clear new line symbols. Thanks everybody for the help.
If you add then to the DOM, you can (reverse) loop over the children, and remove any duplicate element.
Might want to extend this to capture the first/last one.
The below results in