1

How can I use javascript to remove a line in a string that has a certain word on it?

word1
word2
word3

After I run the javascript code, I want it to look like this:

word1
word3

I know I can use str.replace("word2",'') to make it look like this:

word1

word3

but I can't seem to get rid of the line the word was on.

Thanks!

2
  • Since white space like that is meaningless in HTML (with the exception of a few tags/special cases), why do you care?
    – dmeglio
    Mar 18, 2016 at 12:58
  • Assume the word1, word2 and word3 lines are all in their own DIVs or other selectable element? Mar 18, 2016 at 12:58

6 Answers 6

2

you could try to remove the line breaks using regex:

    str.replace(/^(\r\n)|(\n)/,'');

to replace both bind the two replace functions like:

   str.replace("word2",'').replace(/^(\r\n)|(\n)/,'');
3
  • And, how does this take out the complete line, in addition to the text on that line? Mar 18, 2016 at 13:10
  • I am not sure if I understand you correctly, but why not just bind the two replaces together like edited above? Mar 19, 2016 at 0:35
  • This will replace the specified text and line breaks, but what about other text that is on the same line as the specified text? Mar 19, 2016 at 1:23
1

First, when used with a string as the first parameter, the replace method will only replace the first occurrence of the string. Regex can handle multiple ones. But if you want to remove lines containing the word (with other words around them), using replace might not be the way to go.

Instead, you can split your lines, then split the words in those lines, and look for the word:

// when you click on the button, do the filter
document.getElementById('filter').addEventListener('click', function(){
  var word = document.getElementById('word'),
      content = document.getElementById('content');
  
  content.value = filter_lines(content.value, word.value);
}, false);


function filter_lines(content, word)
{
  // Split the lines
  var lines = content.split('\n');
  
  // In each line
  for(var i=0; i<lines.length; i++)
  {
    // Split the words
    var words_on_line = lines[i].split(' ');

    // For each word
    for(var j=0; j<words_on_line.length; j++)
    {
      // If it is the one we are looking for
      if(words_on_line[j].toLowerCase() == word.toLowerCase())
      {
        // Remove the line
        lines.splice(i, 1);
        i--;
        // Stop working on this line
        break;
      }
    }
  }
  // Join the lines back and return them
  return lines.join('\n');
}
#content{
  display: block;
  width: 90%;
  height: 6em;
}
<p>List of lines</p>
<textarea id="content">
word1 this line will stay
blaword2 this one too because the word is inside another one
word2 this one will be removed
But not this one
</textarea>
<p>
  Remove lines containing this word:
  <input id="word" type="text" value="word2">
  <button id="filter">Filter lines</button>
</p>

0

You will need each line of text to be in its own container element (like a <div> and wrap each of those elements in another container element (like another <div>.

This is necessary because a "line" on one viewport may not be the same thing as a "line" on another. This way, each bit of text is always contained. Additionally, if you want to remove the entire line that a word or phrase is on, you can't just replace that word or phrase with string.replace, because the rest of the line's text will still be there.

Then, when you determine which <div> needs to be removed, you remove the div.

Here's an example:

var parent = null, child1 = null, child2 = null, child3 = null, child4 = null, btn = null;
window.addEventListener("DOMContentLoaded", function(){
    parent =   document.getElementById("parent");
    c1 =   document.getElementById("child1");
    c2 =   document.getElementById("child2");
    c3 =   document.getElementById("child3");
    c4 =   document.getElementById("child4");
    b  =   document.getElementById("btn");
  
    b.addEventListener("click", function(){ 
          // You need to add your logic for determining which
          // child element needs to be removed here. I'm just
          // showing the actual code to remove the element.       
          parent.removeChild(c3);    
    });      
});
<div id="parent">
  <div id="child1">Word 1</div>
  <div id="child2">Word 2</div>
  <div id="child3">Word 3</div>
  <div id="child4">Word 4</div>
</div>

<input type="button" id="btn" value="Click to Remove">

0

if words are wrapped using <p> use following

$('p:contains("word2")').remove();

else if they are wrapped with <div> you can use following

$('div:contains("word2")').remove();

you can have any tag you want like span, label, etc just you need to replace it in code. you will need to use jquery to run that.

DEMO

1
  • Since the post is not tagged with jQuery, I'm guessing your answer is going to confuse more than it's going to help. Not to mention that you didn't explain that the words would need to be wrapped in their own <p> elements for your solution to work. Mar 18, 2016 at 13:08
0

One way probably is to split() the words in line breaks and then using looping you can further break each word. Search for the specific word using regex ,replace it and then join subsequently.

-1

Search the html text, and find what makes the line break. Maybe ">br<"(I need to write in this form)? Or something else. Replace it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.